如何在 react-router 中正确使用嵌套路由? [英] How to properly use nested routes with react-router?
问题描述
我试图在 /dashboard
路径下使用 react-router 获取嵌套 UI,所以我得到了:
<路由路径={'/仪表板'}组件={组件.仪表板}onEnter={utils.onlyAfterLogin}><路线路径={'/tiendas'}组件={Components.StoresIndex}/></路线>
我希望 '/dashboard'
成为具有自己 UI 内容的父路由,并包含呈现为嵌套路径的嵌套 UI.所以 '/dashboard/tiendas'
应该渲染仪表板的东西,还有 Components.StoresIndex
组件.
当我尝试访问 '/dashboard/tiendas'
时,它会抛出一个警告日志:
warning: [react-router] 位置/dashboard/tiendas"没有匹配任何路由
Dashboard 的东西渲染得很好,这就是 Dashboard 组件的样子(只显示渲染方法):
渲染(){返回 (<div><应用栏title="Distribuidores Movistar"onLeftIconButtonTouchTap={() =>{this.setState({leftNavOpen:true})}}iconElementRight={<图标菜单图标按钮元素={<IconButton><MoreVertIcon/></IconButton>}targetOrigin={{水平:'右',垂直:'顶部'}}anchorOrigin={{水平:'右',垂直:'顶部'}}><MenuItem primaryText="Cerrar sessión"/></图标菜单>}/><LeftNav open={this.state.leftNavOpen}><MenuItem>Ventas</MenuItem><MenuItem>Inventario</MenuItem><MenuItem>Usuarios</MenuItem><MenuItem>Tiendas</MenuItem><MenuItem>配置</MenuItem><分隔线/><FloatingActionButton mini={true} style={{marginRight: 20}}><内容添加/></FloatingActionButton></LeftNav><Link to={'/dashboard/tiendas'}>Akira</Link>{this.props.children}
);}
假设您使用的是最新的 react-router 版本(在撰写本文时为 2.0.1),这就是它的使用方式.除非它是最顶层的路由组件,否则您不需要为路由添加前缀.
<Route path="dashboard" component={Dashboard}><Route path="tiendas" 组件={Tiendas}/></路线></路线>
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>
);
}
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>
这篇关于如何在 react-router 中正确使用嵌套路由?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!