我们已经熟悉React 服务端渲染（SSR）的基本步骤，现在让我们更进一步利用 React RouterV4 实现客户端和服务端的同构。毕竟大多数的应用都需要用到web前端路由器，所以要让SSR能够正常的运行，了解路由器的设置是十分有必要的
基本步骤
路由器配置
前言已经简单的介绍了React SSR，首先我们需要添加ReactRouter4到我们的项目中
$ yarn add react-router-dom# or, using npm$ npm install react-router-dom
接着我们会描述一个简单的场景，其中组件是静态的且不需要去获取外部数据。我们会在这个基础之上去了解如何完成取到数据的服务端渲染。
在客户端，我们只需像以前一样将我们的的App组件通过ReactRouter的BrowserRouter来包起来。
src/index.js
import React from 'react';import ReactDOM from 'react-dom';import { BrowserRouter } from 'react-router-dom';import App from './App';ReactDOM.hydrate( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root')); 在服务端我们将采取类似的方式，但是改为使用无状态的 StaticRouter
server/index.js
app.get('/*', (req, res) => { const context = {}; const app = ReactDOMServer.renderToString( <StaticRouter location={req.url} context={context}> <App /> </StaticRouter> ); const indexFile = path.resolve('./build/index.html'); fs.readFile(indexFile, 'utf8', (err, data) => { if (err) { console.error('Something went wrong:', err); return res.status(500).send('Oops, better luck next time!'); } return res.send( data.replace('<div id="root"></div>', `<div id="root">${app}</div>`) ); });});app.listen(PORT, () => { console.log(`
注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。
