利用React Router4实现的服务端直出渲染(SSR)(3)

import { matchRoutes } from 'react-router-config'; // ... const matchingRoutes = matchRoutes(Routes, req.url); let promises = []; matchingRoutes.forEach(route => { if (route.loadData) { promises.push(route.loadData()); } }); Promise.all(promises).then(dataArr => { // render our app, do something with dataArr, send response }); // ...

renderRoutes

renderRoutes接收我们的静态路由配置对象并返回所需的Route组件。为了matchRoutes能适当的工作renderRoutes应该被使用。

通过使用renderRoutes，我们的程序改成了一个更简洁的形式。

src/App.js

import React from 'react'; import { renderRoutes } from 'react-router-config'; import { Switch, NavLink } from 'react-router-dom'; import Routes from './routes'; import Home from './Home'; import Posts from './Posts'; import Todos from './Todos'; import NotFound from './NotFound'; export default props => { return ( <div> {/* ... */} <Switch> {renderRoutes(Routes)} </Switch> </div> ); };

译者注

SSR服务端React组件的生命周期不会运行到componentDidMount,componentDidMount只有在客户端才会运行。

React16不再推荐使用componentWillMount方法，应使用constructor来代替。

staticContext的实现应该跟redux的高阶组件connect类似，也是通过包装一层react控件来实现子组件的属性传递。

文章只是对SSR做了一个入门的介绍，如Loadable和样式的处理在文章中没有介绍，但这两点对于SSR来说很重要，以后找机会写一篇相关的博文