6

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>
    );
  }
}
Jamgreen
  • 10,329
  • 29
  • 113
  • 224

3 Answers3

6

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 />} />
Ishan Madhusanka
  • 641
  • 1
  • 11
  • 21
5

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

Craig1123
  • 1,510
  • 2
  • 17
  • 25
  • How do you mean? I do need them – Jamgreen Oct 25 '16 at 20:09
  • What are the purposes for {main: About, header: Header}? If they are just child components, put them inside your about component. If 'About' is the parent component, put it inside the component attribute in place of 'AboutIndex' and add 'AboutIndex' inside of the 'About' component. – Craig1123 Oct 25 '16 at 20:20
  • What is `IndexRoute` ? – jayarjo May 05 '22 at 07:08
4

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>
mandroid
  • 159
  • 1
  • 5