Using React IndexRoute in react-router v4

UPDATE react-router-4 has changed in that it no longer has children. However, with the Route component you can render anything that matches the path.

<Router>
  <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/contact">Contact</Link></li>
    </ul>
    <hr/>

    // All 3 components below would be rendered when in a homepage
    <Route exact path="/" component={Home}/>
    <Route exact path="/" component={About}/>
    <Route exact path="/" component={Contact}/>

    <Route path="/about" component={About}/>
    <Route path="/contact" component={Contact}/>
  </div>
</Router>

This means that if you want a wrapper, you can write it inside the component.

react-router & no IndexRoute any more

<Route exact path="/" component={Home}/> equal to <IndexRoute component={Home}/>

// Switch

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

import { Switch, Route } from 'react-router'

<Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/:user" component={User}/>
    <Route component={NoMatch}/>
</Switch>


/* there will only ever be one child here */

<Fade>
    <Switch>
        <Route/>
        <Route/>
    </Switch>
</Fade>

<Fade>
    <Route/>
    <Route/>
</Fade>

/* there will always be two children here, one might render null though, making transitions a bit more cumbersome to work out */

refs

https://github.com/ReactTraining/react-router/issues/4732#issuecomment-317239220

https://reacttraining.com/react-router/web/api/Switch