Categories
JavaScript Answers

How to use React IndexRoute in react-router v4?

Spread the love

To use React IndexRoute in react-router v4, we add the Route component.

For instance, we write

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

to add the Route component to map the path prop values to the component prop.

When we go to the path, the components is rendered.

Also, we add Links for the routes.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published.