使用react-router也有半年时间了，这里做一个心得记录。
1.路由配置
一般在项目中路由配置文件放置于router文件夹中的index文件，编写Routes模块，然后导出，在项目入口文件中引入该路由模块使用
class Routes extends Component {
render() {
return (
<Router history={hashHistory}>
<Route path="/login" component={Login} />
<Route path="/" onEnter={validate}>
<IndexRedirect to="tableDemo" />
<Route component={Home}>
<Route path="tableDemo" component={TableDemo}/>
<Route path="formDemo" component={FormDemo}/>
</Route>
</Route>
<Route path="*" component={Page_404}/>
</Router>
)
}
}
export default Routes
const Routes = require('./router');
ReactDOM.render(
<Provider store={store}>
<Routes />
</Provider>, document.getElementById('root'));
IndexRoute用于设置默认页
绝对路径可以将 /inbox 从 /inbox/messages/:id 中去除，并且还能够让 Message 嵌套在 App -> Inbox 中渲染。在多层嵌套路由中使用绝对路径的能力让我们对 URL 拥有绝对的掌控。我们无需在 URL 中添加更多的层级，从而可以使用更简洁的 URL。
<Route path="inbox" component={Inbox}>
{/* 使用 /messages/:id 替换 messages/:id */}
<Route path="/messages/:id" component={Message} />
</Route>
<Redirect>
onEnter onLeave
2.匹配原理
3.History
-
原理
browserHistory 其实使用的是 HTML5 的 History API，浏览器提供相应的接口来修改浏览器的历史记录。关于History API还需要看看文档
hashHistory 是通过改变地址后面的 hash 来改变浏览器的历史记录
-
浏览器URL表现形式不同：
使用 hashHistory，浏览器上看到的 url 会是这样的: /#/user/haishanh?_k=adseis
使用 browserHistory，浏览器上看到的 url 会是这样的：/user/haishanh
-
需要server端支持：
browserHistory 需要 server 端支持，使用 hashHistory不需要。
-
切换URL时是否发送请求
使用hashHistory的时候，因为 url 中 # 符号的存在，从 /#/ 到 /#/user/haishanh 浏览器并不会去发送一次 request，react-router 自己根据 url 去 render 相应的模块。
使用 browserHistory 的时候，浏览器从 / 到 /user/haishanh 是会向 server 发送 request 的。所以 server 端是要做特殊配置的。比如用的 express 的话，你需要 handle 所有的路由 app.get('*', (req, res) => { ... })，使用了 nginx 的话，nginx也要做相应的配置。
如果 App 是静态，没有服务端的话，只能用 hashHistory。
