Default component in nested routes in React Router
javascript, jsx, react-router, reactjs
Solution
React Router v6
The route has an attribute `index` which is used to define the index route as per the docs.
<Route index element={<DefaultPage />} />
Problem
In React Router I have a nested Route ``` <Route path='about' component={{main: About, header: Header}}> <Route path='team' component={Team} /> </Route> ``` So now it shows Team when I go to `/about/team`. But how do I set which Component to be seen when I visit `/about`? I have tried ``` <Route path='about' component={{main: About, header: Header}}> <IndexRoute component={AboutIndex} /> <Route path='team' component={Team} /> </Route> ``` and ``` <Route path='about' component={{main: About, header: Header}}> <Route path='/' component={AboutIndex} /> <Route path='team' component={Team} /> </Route> ``` but it doesn't work. My About component looks like this ``` class About extends React.Component { render () { return ( <div> <div className='row'> <div className='col-md-9'> {this.props.children} </div> <div className='col-md-3'> <ul className='nav nav-pills nav-stacked'> <li className='nav-item'><IndexLink className='nav-link' to='/about' activeClassName='active'>About</IndexLink></li> <li className='nav-item'><Link className='nav-link' to='/about/team'>Team</Link></li> </ul> </div> </div> </div> ); } } ```