CODEWITHSUNDEEP
javascriptreactjsreact-router
diegoaguilar
diegoaguilar

Reputation: 8376

How to properly use nested routes with react-router?

I'm trying to get nested UI with react-router under /dashboard path, so I got:

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

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

</Route>

I want '/dashboard' to be a parent route with it's own UI stuff and to include nested UI rendered as nested paths. So '/dashboard/tiendas' should render dashboard's stuff and also Components.StoresIndex component.

When I try to access '/dashboard/tiendas', it throws a warning log:

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

Dashboard stuff is rendering nice though, this is what Dashboard component looks like (only showing render method):

  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>
    );
  }

Upvotes: 0

Views: 847

Answers (1)

Igor Preston
Igor Preston

Reputation: 88

This is how it should be used, assuming you're using latest react-router version (2.0.1 at the moment of writing this post). You don't need to prefix routes with '/' unless it's top most route component.

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

Upvotes: 6

Related Questions