React：访问父路由时使子路由的地址处于活动状态？

Question

我有如下所示的嵌套路由：

<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 成为组件。我错过了什么？

Answer 1

您可以为此使用 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>

React：访问父路由时使子路由的地址处于活动状态？

React: Make child route's address active when visiting parent?

reactjs

react-router

react-redux