您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　12.3.5 服务器端路由

　　因为浏览器端使用了React-Router作为路由，没有理由不在服务器端使用一致的方法，不过在服务器端使用React-Router的方式和浏览器端不一样，在浏览器端，整个Router作为一个React组件传递一个ReactDOM的render函数，Router可以自动和URL同步，但是对于服务器端的过程，URL对应到路由规则的过程需要用match函数：

　　import {match, RouterContext} from 'react-router';

　　match({routes: routes, location: requestUrl}, function(err, redirect, renderProps) {

　　if (err) {

　　return res.status(500).send(err.message);

　　}

　　if (redirect) {

　　return res.redirect(redirect.pathname + redirect.search);

　　}

　　if (!renderProps) {

　　return res.status(404).send('Not Found');

　　}

　　const appHtml = ReactDOMServer.renderToString(

　　);

　　});

　　match函数接受一个对象和一个回调函数作为参数，对象参数中的routes就是Route构成的路由规则树，这里根本用不上Router类，所以也用不上Router的history属性，这就是和浏览器端渲染的最大区别。match是通过对象参数中的location字段来确定路径的，不是靠和浏览器地址栏关联的history。

　　当match函数根据location和routes匹配完成之后，就会调用第二个回调函数参数，根据回调函数第一个参数err和第二个参数redirect可以判断匹配是否错误或者是一个重定向。一切顺利的话，第一第二个参数都是空，有用的就是第三个参数renderProps，这个renderProps包含路由的所有信息，把它用扩展操作符展开作为属性传递给RouterContext组件，渲染的结果就是服务器端渲染产生的HTML字符串。

　　如果应用没有使用代码分片，浏览器端的路由部分就无需任何改变，不过在我们的例子中已经应用了代码分片，所以应用了服务器端渲染之后，浏览器端渲染也要做对应修改，使用match函数来完成匹配，否则，服务器端和浏览器中产生的HTML会不一致，这种不一致不是脱水数据问题导致，而是产生两端的代码不一致导致的：

　　match({history, routes}, (err, redirectLocation, renderProps) => {

　　ReactDOM.render(

　　domElement

　　);

　　});

　　可以注意到，到浏览器端match函数确定当前路径的参数又是用history，不像服务器端那样使用URL字符串。 深入浅出React和Redux