反応ルータでネストされたルートを正しく使用する方法は？

Question

私が反応し、ルータを/dashboardパスの下でネストされたUIを取得しようとしているので、私が得た：

<Route 
    path={'/dashboard'} 
    component={Components.Dashboard} 
    onEnter={utils.onlyAfterLogin}> 

    <Route 
    path={'/tiendas'} 
    component={Components.StoresIndex} /> 

</Route> 

私は'/dashboard'は、それ自身のUIのものを持つ親ルートであること、およびネストされたとしてレンダリングネストされたUIを含めたいですパス。したがって、'/dashboard/tiendas'はダッシュボードのものをレンダリングする必要があります。また、Components.StoresIndexコンポーネントもレンダリングする必要があります。

私は'/dashboard/tiendas'にアクセスしようとすると、それは警告ログをスロー：

warning: [react-router] Location "/dashboard/tiendas" did not match any routes

ダッシュボードのものがが素敵なレンダリングされ、これは、ダッシュボードコンポーネントは（唯一のrenderメソッドを示す）のようになります。

render() { 
    return (
     <div> 
     <AppBar 
      title="Distribuidores Movistar" 
      onLeftIconButtonTouchTap={() => {this.setState({leftNavOpen:true})}} 
      iconElementRight={ 
      <IconMenu 
       iconButtonElement={ 
       <IconButton><MoreVertIcon /></IconButton> 
       } 
       targetOrigin={{horizontal: 'right', vertical: 'top'}} 
       anchorOrigin={{horizontal: 'right', vertical: 'top'}} 
      > 
       <MenuItem primaryText="Cerrar sessión" /> 
      </IconMenu> 
      } 
     /> 
     <LeftNav open={this.state.leftNavOpen}> 
      <MenuItem>Ventas</MenuItem> 
      <MenuItem>Inventario</MenuItem> 
      <MenuItem>Usuarios</MenuItem> 
      <MenuItem>Tiendas</MenuItem> 
      <MenuItem>Configuraciones</MenuItem> 
      <Divider/> 
      <FloatingActionButton mini={true} style={{marginRight: 20}}> 
      <ContentAdd /> 
      </FloatingActionButton> 
     </LeftNav> 
     <Link to={'/dashboard/tiendas'}>Akira</Link> 
     {this.props.children} 
     </div> 
    ); 
    } 

Answer 1

最新の反応ルータバージョン（この記事の執筆時点では2.0.1）を使用していると仮定して、これを使用する方法です。 ルートの先頭にルート要素がない限り、ルートに「/」を付ける必要はありません。

<Route path="/" component={Root}> 
    <Route path="dashboard" component={Dashboard}> 
    <Route path="tiendas" component={Tiendas}/> 
    </Route> 
</Route>