因此，我最终自己解决了这个问题。我得到的错误是来自未渲染的嵌套组件，这就是js引擎抱怨随机
<字符的原因。
现在到我的快速设置。对于那些不知道如何在服务器端渲染中使用react的人来说，这很简单：Node或io.js可用于
renderToString()在组件上调用React的方法，然后将其发送到发出请求的客户端。您可能已经听说过这种方法带来的好处，但是对于那些不知道的人来说：
- 即使Google已经可以在其抓取工具中执行JS，您也会获得更多SEO友好性；这几乎只是一个更安全的选择
- 非Javascript情况的后备。如果您的应用程序脚本加载缓慢，您仍然可以将实际页面呈现给客户端，而不必等待凝视空白屏幕。这也使在浏览器上禁用了JS的用户在大多数情况下仍可与您的应用进行交互；链接仍然有效，表单仍然可以提交，＆c。
- 您可以获得客户端和服务器之间的代码共享的其他好处。除了降低复杂性这一事实外，没有其他事情令人难以置信，因此，您可以获得降低复杂性的所有好处（可能更少的耦合，更容易的可维护性，更简单的结构，同构性等）。
- 另一个好处是可以使用react-router的html5历史记录API，而不需要使用其他令人讨厌的哈希片段。
您甚至可能会对这种方法感到疯狂，并在应用程序加载时处理占位符之类的事情，或者为缓慢加载的状态（加载时为Facebook）提供其他反馈机制。
基本方法大致以以下方式运行：
- 引导时，节点应用会基于以下实例实例化React-Router实例
routes.jsx
- 请求转到服务器，然后服务器使用express’
req.path
为react-router处理以提供路由字符串。 - 然后，React路由器会匹配提供的路由，并尝试渲染相应的组件以进行快速发回。
- React发送html响应，并且您的客户端可以绘制某些内容，而不管您的应用脚本的速度如何。我们通过优质的CDN为我们提供服务，但是即使拥有最佳的分发和压缩速度，慢速的网络仍然会使人们暂时处于空白状态。
- 加载了所需的应用程序脚本后，React可以使用相同的
routes.jsx
文件来接管并生成htmlreact-router
。这里的另一个好处是可以缓存您的应用程序代码，希望将来的交互甚至不必依赖另一个调用。
还有一点值得注意：我使用webpack捆绑了我的React代码，现在
browser.jsx是入口点。在重构服务器端渲染之前
app.jsx，它以前是；您可能需要重新配置结构，以适应在何处渲染的内容。:)
编号：
Browser.jsx
const React = require('react');const Router = require('react-router').Router;const hist = require('history');const routes = require('./routes');const newHistory = hist.createHistory();React.render(<Router history={newHistory}>{routes}</Router>, window.document);App.js（特快服务器） ：
//...other express configurationconst routes = require('../jsx/routes');const React = require('react');const {RoutingContext, match} = require('react-router');const hist = require('history');app.use((req, res, next) => { const location = hist.createLocation(req.path); match({ routes: routes, location: location, }, (err, redirectLocation, renderProps) => { if (redirectLocation) { res.redirect(301, redirectLocation.pathname + redirectLocation.search); } else if (err) { console.log(err); next(err); // res.send(500, error.message); } else if (renderProps === null) { res.status(404) .send('Not found'); } else { res.send('<!DOCTYPE html>' + React.renderToString(<RoutingContext {...renderProps}/>)); } });}); //...other express configurationRoutes.jsx
<Route path="/" component={App}> <DefaultRoute component={Welcome}/> <Route path="dashboard" component={Dashboard}/> <Route path="login" component={Login}/></Route>App.jsx
<html><head> <link rel="stylesheet" href="/assets/styles/app.css"/></head> <body> <Navigation/> <RouteHandler/> <Footer/> <body/></html>
有用的网址：
- https://ifelse.io/2015/08/27/server-side-rendering-with-react-and-react-router/
- https://github.com/rackt/react-router
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）