Default component in nested routes in React Router

Question

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>
    );
  }
}

Answer 1

REACT ROUTER 4 UPDATE

The default route is the one without a path.

import BrowserRouter from 'react-router-dom/BrowserRouter';
import Switch from 'react-router-dom/Switch';
import Route from 'react-router-dom/Route';

<BrowserRouter>
  <Switch>
    <Route exact path='/about' component={AboutIndex} />
    <Route component={AboutIndex} /> // <--- don't add a path for a default route
  </Switch>
</BrowserRouter>

---

If you don't need this object {main: About, header: Header} in your component, then just put AboutIndex in the component attribute. That should work

<Router history={browserHistory}>
  <Route path='about' component={AboutIndex}>
    <IndexRoute component={AboutIndex} />
    <Route path='team' component={Team} />
  </Route>
</Router>

If you still need main and header components, just add them in as either parent, child, or sibling components depending on your needs

Answer 2

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 />} />

Answer 3

Another way to do I found is to use the Navigate component of the react-router-dom package with the index attribute. After the a user navigates to the support route, it will default to the about page in the following example.

<Route path="support/*" element={<Support />}>
    <Route index element={<Navigate to="about" replace />} />
    <Route path="about" element={<About />} />
    <Route path="contact" element={<Contact/>} />
</Route>