Using React IndexRoute in react-router v4
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
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.