reactjs router 4 (react-router-dom)使用嵌套路由遇到的问题

在使用react router 4 (react-router-dom)时遇到了好多问题，折腾了快两天才弄清楚。这主要是自己急于求成，没有读官方的文档。回头想想，自己折腾的时间或许比读完官方文档的时间还长。下面说遇到的问题。
1. 只使用Route会渲染所有匹配的路径。看下面代码：

<Route path='/' component={Com1}/>
<Route path='/app' component={Com2}/>

这时如果访问/app，那么Com1和Com2都会被显示出来。因为/app既可以匹配/，也可以匹配/app。如果只想显示一个组件，要改为：

<Switch>
<Route exact path='/' component={Com1}/>
<Route path='/app' component={Com2}/>
</Switch>

这里首先加上了Switch，其次加入了exact。加入Switch表示，只显示一个组件。加exact表示精确匹配/。如果不加exact，/app也会匹配/。
2. 使用嵌套路由后地址会出现/a/b的样式。
3. 使用嵌套路由时，外层路由有时不能加exact。否则，内层路由存在匹配不上的问题。例如外层路由：

<Route exact path='/a' component={Com1}>

内层路由：

<Route exact path='/' component={Com2}/>
<Route path='/b' component={Com3}/>

结果内层路由/可以匹配上，但是/b就无法匹配。
4. 可以自己构造一些组建把路由包起来使用，例如：

class ProtectedRoute extends React.Component {
  render(){
    const role = "admin";
    const expired = false;
    if (expired){
      return <Redirect to='/login' push={true}/>      
    }
    const requiredRole = this.props.requiredRole;
    const children = this.props.children;
    return(
      <Route exact={this.props.exact} path={this.props.path} render={(props) => {
        if(requiredRole.indexOf(role) >= 0){
          return <Nested {...props}/>
        } else {
          return <Redirect to='/login' push={true}/>
        }
      }}/>
    );
  }
}
......
<ProtectedRoute exact={false} path='/' requiredRole={["superadmin", "admin"]}>
    <AsyncHome/>
</ProtectedRoute>

而且在使用Route的render时，要把…props传下去，否则Nested组件中无法拿到this.props.match。
在网上搜索“react router”大多数是2或者3的教程，必须搜“react router4”才能找到一些4的教程。

reactjs router 4 (react-router-dom)使用嵌套路由遇到的问题

悦读