我们将使用fetch在客户端和服务端，我们增加isomorphic-fetch到我们的项目。同时我们也增加serialize-javascript这个包，它可以方便的序列化服务器上获取到的数据。
$ yarn add isomorphic-fetch serialize-javascript # or, using npm: $ npm install isomorphic-fetch serialize-javascript
我们定义我们的路由信息为一个静态数组在routes.js文件里
src/routes.js
import App from './App'; import Home from './Home'; import Posts from './Posts'; import Todos from './Todos'; import NotFound from './NotFound'; import loadData from './helpers/loadData'; const Routes = [ { path: 'https://www.jb51.net/', exact: true, component: Home }, { path: '/posts', component: Posts, loadData: () => loadData('posts') }, { path: '/todos', component: Todos, loadData: () => loadData('todos') }, { component: NotFound } ]; export default Routes;
有一些路由配置现在有一个叫loadData的键，它是一个调用loadData函数的函数。这个是我们的loadData函数的实现
helpers/loadData.js
import 'isomorphic-fetch'; export default resourceType => { return fetch(`https://jsonplaceholder.typicode.com/${resourceType}`) .then(res => { return res.json(); }) .then(data => { // only keep 10 first results return data.filter((_, idx) => idx < 10); }); };
我们简单的使用fetch来从REST API 获取数据
在服务端我们将使用ReactRouter的matchPath去寻找当前url所匹配的路由配置并判断它有没有loadData属性。如果是这样，我们调用loadData去获取数据并把数据放到全局window对象中在服务器的响应中
server/index.js
import React from 'react'; import express from 'express'; import ReactDOMServer from 'react-dom/server'; import path from 'path'; import fs from 'fs'; import serialize from 'serialize-javascript'; import { StaticRouter, matchPath } from 'react-router-dom'; import Routes from '../src/routes'; import App from '../src/App'; const PORT = process.env.PORT || 3006; const app = express(); app.use(express.static('./build')); app.get('/*', (req, res) => { const currentRoute = Routes.find(route => matchPath(req.url, route)) || {}; let promise; if (currentRoute.loadData) { promise = currentRoute.loadData(); } else { promise = Promise.resolve(null); } promise.then(data => { // Lets add the data to the context const context = { data }; const app = ReactDOMServer.renderToString( <StaticRouter location={req.url} context={context}> <App /> </StaticRouter> ); const indexFile = path.resolve('./build/index.html'); fs.readFile(indexFile, 'utf8', (err, indexData) => { if (err) { console.error('Something went wrong:', err); return res.status(500).send('Oops, better luck next time!'); } if (context.status === 404) { res.status(404); } if (context.url) { return res.redirect(301, context.url); } return res.send( indexData .replace('<div></div>', `<div>${app}</div>`) .replace( '</body>', `<script>window.__ROUTE_DATA__ = ${serialize(data)}</script></body>` ) ); }); }); }); app.listen(PORT, () => { console.log(`😎 Server is listening on port ${PORT}`); });
请注意，我们添加组件的数据到context对象。在服务端渲染中我们将通过staticContext来访问它。
现在我们可以在需要加载时获取数据的组件的构造函数和componentDidMount方法里添加一些判断
src/Todos.js
import React from 'react'; import loadData from './helpers/loadData'; class Todos extends React.Component { constructor(props) { super(props); if (props.staticContext && props.staticContext.data) { this.state = { data: props.staticContext.data }; } else { this.state = { data: [] }; } } componentDidMount() { setTimeout(() => { if (window.__ROUTE_DATA__) { this.setState({ data: window.__ROUTE_DATA__ }); delete window.__ROUTE_DATA__; } else { loadData('todos').then(data => { this.setState({ data }); }); } }, 0); } render() { const { data } = this.state; return <ul>{data.map(todo => <li key={todo.id}>{todo.title}</li>)}</ul>; } } export default Todos;
工具类
ReactRouterConfig是由ReactRouter团队提供和维护的包。它提供了两个处理ReactRouter和SSR更便捷的工具matchRoutes和renderRoutes。
matchRoutes
前面的例子都非常简单都，都没有嵌套路由。有时在多路由的情况下，使用matchPath是行不通的，因为它只能匹配一条路由。matchRoutes是一个能帮助我们匹配多路由的工具。
这意味着在匹配路由的过程中我们可以往一个数组里存放promise，然后调用promise.all去解决所有匹配到的路由的取数逻辑。