eclipsis eclipsis - 3 months ago 14
React JSX Question

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

I have nested routes that look like the following:

<Route path='parent' component={Parent}>
<Route path='child1' component={Child1}/>
<Route path='child2' component={Child2}/>
<Route path='child3' component={Child3}/>
</Route>


I'm trying to make it when you visit
/parent
, you're redirected to
/parent/child1
. I've tried using
IndexRoute
from React-Router on the
Child1
component, but that merely makes
Child1
the component when you visit
/parent
. What am I missing?

Answer

You can use IndexRedirect component for this.

<Route path='parent' component={Parent}>
    <IndexRedirect to="/child1" />
    <Route path='child1' component={Child1}/>
    <Route path='child2' component={Child2}/>
    <Route path='child3' component={Child3}/>
</Route>