Tôi đang cố gắng thiết lập hiển thị phía máy chủ cho ứng dụng phản ứng của mình và tôi đang cố sử dụng mô-đun react-router tuyệt vời để cho phép nó xử lý các trường hợp không phải js (một số trình thu thập thông tin, khi người dùng đã tắt js vì một số lý do). Tuy nhiên, tôi đang gặp rắc rối. Tôi đã sử dụng phản ứng tuyệt vời ở đây https://stackoverflow.com/a/28558545/3314701 như một hướng dẫn về các loại, nhưng tôi nhận được lỗi lạ ném vào tôi. Tôi nhận được sự liên tục Syntax Error khi cố gắng sử dụng react.renderToString(). Tôi có đang thiết lập hiển thị phía máy chủ không chính xác, thiếu điều gì đó hiển nhiên hoặc bất kỳ điều gì khác không?Hiển thị bên máy chủ với phản ứng, phản ứng-bộ định tuyến và hiển thị
thiết lập của tôi:
máy chủ Really cơ bản nhanh
require('babel/register');
var app = express();
// misc. express config...
var Router = require('react-router'),
routes = require('../jsx/app').routes,
React = require('react');
app.use(function(req, res, next) {
var router = Router.create({location: req.url, routes: routes});
router.run(function(Handler, state) {
console.log(Handler);
var html = React.renderToString(<Handler/>);
return res.render('react_page', {html: html});
});
});
cấp cao phản ứng <App/> phần
// Shims
require('intl');
require('es5-shim');
var React = require('react/addons'),
Router = require('react-router'),
Nav = require('./nav'),
injectTapEventPlugin = require("react-tap-event-plugin"),
window.React = React; // export for http://fb.me/react-devtools
// Intl
var ReactIntl = require('react-intl'),
IntlMixin = ReactIntl.IntlMixin;
var Route = Router.Route,
DefaultRoute = Router.DefaultRoute,
NotFoundRoute = Router.NotFoundRoute,
RouteHandler = Router.RouteHandler;
var App = React.createClass({
mixins: [IntlMixin],
getInitialState: function() {
return {
connected: false,
loaded: false,
user: true
};
},
render: function() {
return (
<div className="container-fluid">
<Nav/>
<RouteHandler/>
<Footer/>
</div>
);
}
});
var routes = (
<Route name="Home" path="/" handler={App}>
<DefaultRoute name="Welcome " handler={Welcome}/>
<Route name="Bar" path="/bar" handler={Bar}>
<Route name="foo" path="/foo" handler={Foo}></Route>
</Route>
);
Router.run(routes, Router.HistoryLocation , function(Handler) {
React.render(<Handler/>, document.getElementById('app'));
});
module.routes = routes;
đầu ra:
flo-0,1,2 (err): <div className="progressbar-container" >
flo-0,1,2 (err): ^
flo-0,1,2 (err): SyntaxError: Unexpected token <
flo-0,1,2 (err): at exports.runInThisContext (vm.js:73:16)
flo-0,1,2 (err): at Module._compile (module.js:443:25)
flo-0,1,2 (err): at Module._extensions..js (module.js:478:10)
flo-0,1,2 (err): at Object.require.extensions.(anonymous function) [as .js] (/Users/user/Code/foobar/apps/flo/node_modules/babel/node_modules/babel-core/lib/babel/api/register/node.js:161:7)
flo-0,1,2 (err): at Module.load (module.js:355:32)
flo-0,1,2 (err): at Function.Module._load (module.js:310:12)
flo-0,1,2 (err): at Function.<anonymous> (/Users/user/.nvm/versions/node/v0.12.4/lib/node_modules/pm2/node_modules/pmx/lib/transaction.js:62:21)
flo-0,1,2 (err): at Function.cls_wrapMethod (/Users/user/Code/foobar/apps/bar/node_modules/newrelic/lib/shimmer.js:230:38)
flo-0,1,2 (err): at Function.<anonymous> (/Users/user/Code/foobar/apps/bar/node_modules/pmx/lib/transaction.js:62:21)
flo-0,1,2 (err): at Module.require (module.js:365:17)
flo-0,1,2 (err): at require (module.js:384:17)
Các lỗi dường như không có liên quan đến mã bạn đăng, giống như bạn quên bao gồm một JSX pa rser một nơi nào đó – David
Tôi đã làm việc trên một số ví dụ [ở đây] (https://github.com/goatslacker/isomorphic-react-examples) bằng cách sử dụng alt và iso với bộ định tuyến phản ứng, hy vọng nó có thể hữu ích –