Using React IndexRoute in react-router v4

Question

I'm learning React myself with online tutorial.

So this is a basic example about using React Router:

<Router history={browserHistory}>   <Route path="/" component={App}>     <IndexRoute component={Home}/>     <Route path="/home" component={Home}/>     <Route path="/about" component={About}/>     <Route path="/contact" component={Contact}/>   </Route> </Router> 

With my App component:

class App extends React.Component {    render() {       return (          <div>             <ul>               <li><Link to="home">Home</Link></li>               <li><Link to="about">About</Link></li>               <li><Link to="contact">Contact</Link></li>            </ul>           {this.props.children}         </div>      )    } } export default App; 

However, I have problem when using IndexRoute because it shows nothing, so I search for the module of react-router-dom v4 on npm and there is no IndexRoute inside. Instead it uses this:

<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/>   <Route exact path="/" component={Home}/>   <Route path="/about" component={About}/>   <Route path="/contact" component={Contact}/>   </div> </Router> 

So how can I render 2 component for 1 path ?

Answer 1

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.

Answer 2

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