react-router 4 新特性

1、exact 
<Route path='/' component={Home} />
<Route path='/page' component={Page} />
//这种情况下，如果匹配路由path='/page'，那么会把Home也会展示出来。


所以我们经常添加exact来解决上述问题。
<Route exact path='/' component={Home} />
<Route path='/page' component={Page} />


2.IndexRoute
<Router>
  <Route path="/" component={App}>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>


上面代码中，访问根路径/，不会加载任何子组件。也就是说，App组件的this.props.children，这时是undefined。
因此，通常会采用{this.props.children || <Home/>}这样的写法。这时，Home明明是Accounts和Statements的同级组件，却没有写在Route中。
IndexRoute就是解决这个问题，显式指定Home是根路由的子组件，即指定默认情况下加载的子组件。你可以把IndexRoute想象成某个路径的index.html。


<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>


现在，用户访问/的时候，加载的组件结构如下。


<App>
  <Home/>
</App>