react-router v4 嵌套路由实现

1. react-router4.0以下的嵌套路由实现 :

嵌套的路由可以放在一个router标签中，形式如下,嵌套的路由也直接放在一起。

<Route component={App}>

<Route path="groups" components={Groups} />

<Route path="users" components={Users}>

<Route path="users/:userId" component={Profile} />

</Route>

</Route>

2.但是在4.0以后，嵌套的路由与之前的就完全不同了，需要单独放置在嵌套的根component中去处理路由。

正确写法如下：

（1）项目的一级路由：

<Route component={App}>

<Route path="groups" components={Groups} />

<Route path="users" components={Users} />

</Route>

（2）在需要嵌套路由的component中添加新的路由:

const Users = ({ match }) => (

<div>

<h2>Topics</h2>

<Route path={`${match.url}/:userId`} component={Profile}/>

</div>

) ;