react-router是专为React设计的路由解决方案,以react component的方式提供API,包含常用的Router,Route,IndexRedirect,Link,browserHistory等。react-router充分利用react component提供的生命周期特性,使定义路由和开发react component体验一致。
声明一份路径到各个component的映射表结构非常清晰:
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={AppSimple}>
<Route path="/editor" component={Editor} />
<IndexRedirect to="/proj" />
</Route>
</Router>
</Provider>
而且支持多层嵌套
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App} onEnter={auth}>
<Route path="/proj" component={Proj} />
<Route path="/user" component={User} />
<Route path="/admin" component={AdminWrapper}>
<Route path="/admin/proj" name="adminProj" component={Admin.Proj} />
<Route path="/admin/container" component={Admin.Container} />
<IndexRedirect to="/admin/proj" />
</Route>
<Route path="/help" component={Help} />
</Route>
</Router>
</Provider>
Link组件可以接收Router的状态,用于取代a元素,生成一个链接,允许用户点击后跳转到另一个路由。同时提供activeStyle或者activeClassName来定义链接触发样式。
<Link to={`/history?act_id=${record.act_id}`} activeClassName="active">查看历史版本</Link>
除了使用Link组件做正常的用户点击跳转,在提交表单或者点击按钮有额外操作时,如何导航到路由页面呢?History API很方便:
browserHistory.push(`/tpl?proj_id=${key}`)
react-router是基于history模块提供的api进行上层开发的:
react-router做了什么?
Link点击后发生了什么?