在上一篇中，说明了修改的文件和新增的文件，这一篇将具体讲解做了什么
首先，调整了下文件的结构,把文件放到了src中
还记得我们改了什么文件了吗，提示大家一下，上面是修改的，下面的新增的
1.首先安装了react-router的依赖，注意此处要安装^2.8.1这个版本，我一开始安装的4，报了如下错，关于4.0，此处不涉及
TypeError: (0 , _reactRouter.match) is not a function
2.服务端，使用了match,具体如下
定义
match(location, cb)
这个函数被用于服务端渲染。它在渲染之前会匹配一组 route 到一个 location，并且在完成时调用 callback(error, redirectLocation, renderProps)
。
传给回调函数去 match的三个参数如下：
error：如果报错时会出现一个 Javascript 的 Error对象，否则是 undefined
redirectLocation：如果 route 重定向时会有一个 Location 对象，否则是 undefined
renderProps：当匹配到 route 时 props 应该通过路由的 context，否则是 undefined
如果这三个参数都是 undefined，这就意味着在给定的 location 中没有 route 被匹配到。
具体使用
function handleRender(req, res) {
match({ routes: routes, location: req.url }, (err, redirectLocation, renderProps) => {
if (err) {
res.status(500).end(`server error: ${err}`)
} else if (redirectLocation) {
res.redirect(redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
const helloChan = {
config: {
text: 'I come from serve side'
}
}
const initialState = { helloChan }
const store = configureStore(initialState);
const html = renderToString(
<Provider store={store}>
<RouterContext {...renderProps}/>
</Provider>
)
const finalState = store.getState();
res.end(renderFullPage(html, finalState));
} else {
res.status(404).end('404 not found')
}
})
}
其中这一块，不知道大家有没有发现
没有路由前是这样的
<Provider store={store}>
<App />
</Provider>
现在变成了这样
<Provider store={store}>
<RouterContext {...renderProps}/>
</Provider>
RouterContext这个也是react-router中的功能块，它和match同时出现，其实简单来理解，就像下面说的
使用 match在渲染之前根据 location 匹配 route
使用 RoutingContext同步渲染 route 组件
3.客户端，也是导入了路由相关的代码，看具体变化
import { Router, browserHistory } from 'react-router'
import routes from './routes'
这一块截图比较最清楚
4.服务端客户端通用的路由文件,这个没什么好说的
import React from 'react'
import { Router,Route, IndexRoute } from 'react-router'
import About from '../containers/About'
import App from '../containers/App'
import Concact from '../containers/Concact'
import Index from '../containers/Index'
const routes = (
<Route path="/" component={App} >
<IndexRoute component={Index}/>
<Route path="a" component={About} />
<Route path="c" component={Concact} />
</Route>
)
export default routes;
好了，其实主要就是加了这么多东西，这样看了下是不是很简单
