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 ?