反应路由器服务器端错误 [英] React-router server-side error
问题描述
我正在尝试使客户端webapp同构. 我将其作为一种模式:客户端路由(使用react-router )和服务器端路由
I'm trying to make my client-side webapp isomorphic. I get this as a pattern: Client Routing (using react-router) and Server-Side Routing
这就是我所拥有的.
server.js:
server.js:
var React = require('react'),
express = require('express'),
Router = require('react-router'),
routes = require('./src/js/main'),
path = require('path'),
app = express(),
port = 5555,
bodyParser = require('body-parser');
// Make sure to include the JSX transpiler
require("node-jsx").install();
// Include static assets. Not advised for production
app.use(express.static(path.join(__dirname, 'dist')));
// Set view path
app.set('views', path.join(__dirname, 'views'));
// set up ejs for templating. You can use whatever
app.set('view engine', 'ejs');
// ...express config...
app.use(function(req, res, next) {
var router = Router.create({location: req.url, routes: routes})
router.run(function(Handler, state) {
var reactHtml = React.renderToString(<Handler/>)
return res.render('index.ejs', {reactOutput: reactHtml})
})
})
app.listen(port);
console.log('Server is Up and Running at Port : ' + port);
main.js:
var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var Link = Router.Link;
var APPLICATION_ID = '',
SECRET_KEY = '',
VERSION = 'v1'; //default application version;
Backendless.initApp(APPLICATION_ID, SECRET_KEY, VERSION);
// wrapper
APP = require('./components/app').APP;
// pages
var Frontpage = require('./components/frontpage/app-frontpage'); // homepage
var NewEstate = require('./components/new-estate/app-newestate');
var NewEstateDetails = require('./components/new-estate/app-newestatedetails');
var Contacts = require('./components/static/app-contacts');
var About = require('./components/static/app-about');
var SecondEstate = require('./components/second-estate/app-secondestate');
var SecondEstateDetails = require('./components/second-estate/app-secondestatedetails');
var CommerceEstate = require('./components/commerce-estate/app-commerceestate');
var CommerceEstateDetails = require('./components/commerce-estate/app-commerceestatedetails');
var routes = (
<Route handler={APP}>
<Route handler={Frontpage}/>
<Route name="NewEstate" ignoreScrollBehavior={true} handler={NewEstate}/>
<Route name="NewEstateDetails" ignoreScrollBehavior={true} path="/NewEstate/:itemId" params={{routeType: "NewEstateDetails" }} handler={NewEstateDetails}/>
<Route name="SecondEstate" ignoreScrollBehavior={true} handler={SecondEstate}/>
<Route name="SecondEstateDetails" ignoreScrollBehavior={true} path="/SecondEstate/:itemId" params={{routeType: "SecondEstateDetails" }} handler={NewEstateDetails}/>
<Route name="CommerceEstate" ignoreScrollBehavior={true} handler={CommerceEstate}/>
<Route name="CommerceEstateDetails" ignoreScrollBehavior={true} path="/CommerceEstate/:itemId" params={{routeType: "CommerceEstateDetails" }} handler={NewEstateDetails}/>
<Route name="Contacts" handler={Contacts}/>
<Route name="About" handler={About}/>
</Route>
);
Router.run(routes, function (Handler) {
React.render(<Handler/>, document.getElementById('main'));
});
和index.ejs:
and index.ejs:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Балкит - Агентство недвижимости</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/styles.css">
</head>
<body >
<div id="main"><%- reactOutput %><div class=""></div></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA7F9cOuVNV6_RRAdLowrz9elBbRuXFy2Y&libraries=drawing"></script>
<script src="js/scripts.js"></script>
<script src="js/main.js"></script>
</script>
</body>
</html>
我正在尝试运行server.js并收到此错误:
I'm trying to run server.js and getting this error:
//web/react-balkit/server.js:28
var reactHtml = React.renderToString(<Handler/>)
^
SyntaxError: Unexpected token <
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:935:3
我已经尝试修复它，但是我离这种模式越来越远，并且遇到了更多的错误.
I've tried to fix it, but i'm getting further from the pattern and getting more errors.
推荐答案
require("node-jsx").install();行正在插入将任何JSX转换为原始JS的中间件.
The line require("node-jsx").install(); is inserting middleware that transforms any JSX into vanilla JS.
但是，您需要之前使用JSX语法的文件.与所有中间件一样，顺序很重要.
However, you are requiring a file with JSX syntax before this is included. As with all middleware, order is important.
要解决此问题，请反方向插入:
To fix, insert them the other way round:
require("node-jsx").install();
routes = require('./src/js/main')
require("node-jsx").install();
routes = require('./src/js/main')
服务器的添加
您可以创建工厂以使用标准JS.
You can create a factory in order to use standard JS.
app.use(function(req, res, next) {
var router = Router.create({location: req.url, routes: routes})
router.run(function(Handler, state) {
var Element = React.createFactory(Handler);
var reactHtml = React.renderToString(Element());
return res.render('index.ejs', {reactOutput: reactHtml})
});
});
这篇关于反应路由器服务器端错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
