React-router服务器端错误

我试图让我的客户端Web应用程序同构。 我得到这个模式: 客户端路由(使用react-router)和服务器端路由

在这里,我得到了什么。

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:

 <!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并得到这个错误:

 //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 

我试图解决它,但我越来越从模式,并获得更多的错误。

       

网上收集的解决方案 "React-router服务器端错误"

该行require("node-jsx").install(); 正在插入将任何JSX转换成香草JS的中间件。

但是, 包含这个文件之前 ,您需要具有JSX语法的文件。 与所有中间件一样,顺序也很重要。

要修复,反过来插入它们:

require("node-jsx").install(); routes = require('./src/js/main')

编辑:添加服务器

你可以创build一个工厂,以使用标准的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}) }); });