React:访问父路由时使子路由的地址处于活动状态?
React: Make child route's address active when visiting parent?
我有如下所示的嵌套路由:
<Route path='parent' component={Parent}>
<Route path='child1' component={Child1}/>
<Route path='child2' component={Child2}/>
<Route path='child3' component={Child3}/>
</Route>
当您访问 /parent
时,我正在努力做到这一点,您将被重定向到 /parent/child1
。我已经尝试在 Child1
组件上使用 React-Router 中的 IndexRoute
,但这只会在您访问 /parent
时使 Child1
成为组件。我错过了什么?
您可以为此使用 IndexRedirect 组件。
<Route path='parent' component={Parent}>
<IndexRedirect to="/child1" />
<Route path='child1' component={Child1}/>
<Route path='child2' component={Child2}/>
<Route path='child3' component={Child3}/>
</Route>
我有如下所示的嵌套路由:
<Route path='parent' component={Parent}>
<Route path='child1' component={Child1}/>
<Route path='child2' component={Child2}/>
<Route path='child3' component={Child3}/>
</Route>
当您访问 /parent
时,我正在努力做到这一点,您将被重定向到 /parent/child1
。我已经尝试在 Child1
组件上使用 React-Router 中的 IndexRoute
,但这只会在您访问 /parent
时使 Child1
成为组件。我错过了什么?
您可以为此使用 IndexRedirect 组件。
<Route path='parent' component={Parent}>
<IndexRedirect to="/child1" />
<Route path='child1' component={Child1}/>
<Route path='child2' component={Child2}/>
<Route path='child3' component={Child3}/>
</Route>