Как правильно использовать вложенные маршруты с помощью реактивного маршрутизатора?

Question

Я пытаюсь получить вложенный интерфейс с среагировать-маршрутизатор под /dashboard путем, так что я получил:

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

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

</Route> 

Я хочу '/dashboard' быть родитель маршрутом с собственным материалом пользовательского интерфейса и включить вложенную UI показана как вложенные пути. Таким образом, '/dashboard/tiendas' должен отображать элементы приборной панели, а также Components.StoresIndex.

Когда я пытаюсь получить доступ к '/dashboard/tiendas', он выдает предупреждение журнала:

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

Dashboard материал оказывает хороший, хотя, это то, что Dashboard компонент выглядит (показывая только метод отрисовки):

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>