反应路由器服务器端错误
Posted
技术标签:
【中文标题】反应路由器服务器端错误【英文标题】：React-router server-side error 【发布时间】：2015-10-13 08:58:22 【问题描述】：我正在尝试使我的客户端 web 应用程序同构。 我将其视为一种模式：Client Routing (using react-router) and Server-Side Routing
这就是我所拥有的。
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
我已经尝试修复它，但我离模式越来越远，并且出现了更多错误。
【问题讨论】：
【参考方案1】：require("node-jsx").install(); 行正在插入将任何 JSX 转换为普通 JS 的中间件。
但是，您需要一个包含 JSX 语法的文件之前。与所有中间件一样，顺序很重要。
要修复，请将它们反过来插入：
require("node-jsx").install();
routes = require('./src/js/main')
编辑：添加服务器
您可以创建工厂以使用标准 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)
);
);
【讨论】：
我已将require("node-jsx").install(); 放在整个代码的开头。不幸的是，它没有帮助。我检查过：node-jsx^0.13.3 安装正确。
谢谢！似乎有效！我还不能确定，因为我没有找到在全球范围内注入几个 js 库的方法。可能你知道吗？ ***.com/questions/31577850/…以上是关于反应路由器服务器端错误的主要内容，如果未能解决你的问题，请参考以下文章
如何在反应服务器端渲染中正确处理 window=undefined 错误