React-Router : What is the purpose of IndexRoute?

javascript reactjs react-router url-routing
Nick Pineda picture Nick Pineda · Sep 22, 2015 · Viewed 66.9k times · Source

I don't understand what the purpose of using an IndexRoute and IndexLink. It seems that in any case the code below would of selected the Home component first unless the About path was activated.

<Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="about" component={About}/>
</Route>

vs 

<Route path="/" component={App}>
  <Route path="home" component={Home}/>
  <Route path="about" component={About}/>
</Route>

What's the advantage/purpose here of the first case?

Answer

Michelle Tilley picture Michelle Tilley · Sep 22, 2015

In the top example, going to / would render App with Home passed as a child. In the bottom example, going to / would render App with neither Home nor About being rendered, since neither of their paths match.

For older versions of React Router, more information is available on associated version's Index Routes and Index Links page. Starting in version 4.0, React Router no longer uses the IndexRoute abstraction to achieve the same goal.

Related questions

Client Routing (using react-router) and Server-Side Routing

I have been thinking and I am confused with the routing between Client and Server. Suppose I use ReactJS for server-side rendering before sending the request back to web browser, and use react-router as a client-side routing to switch between …

Read More
Multiple path names for a same component in React Router

I am using the same component for three different routes: <Router> <Route path="/home" component={Home} /> <Route path="/users" component={Home} /> <Route path="/widgets" component={Home} /> </Router> Is there anyway …

Read More
react-router : run is not a function

A Egghead tutorial teaches it like this: var React = require('react'); var Router = require('react-router'); var routes = require('./config/routes'); Router.run(routes, function(Root){ React.render(<Root />, document.getElementById('app')); }); Yet I get this error: Uncaught …

Read More