js_react__react-router-tutorial/lessons/09-index-links

Index Links

Have you noticed in our app that we don't have any navigation to get back to rendering the Home component?

Lets add a link to / and see what happens:

// in App.js
// ...
<li><NavLink to="/">Home</NavLink></li>
// ...

Now navigate around. Notice anything weird? The link to Home is always active! As we learned earlier, parent routes are active when child routes are active. Unfortunately, / is the parent of everything.

For this link, we want it to only be active when the index route is active. There are two ways to let the router know you're linking to the "index route" so it only adds the active class (or styles) when the index route is rendered.

IndexLink

First lets use the IndexLink

// App.js
import { IndexLink, Link } from 'react-router'

// ...
<li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>

Fixed! Now this link is only "active" when we're at the index route. Go ahead and click around to see.

onlyActiveOnIndex Property

We can use Link as well by passing it the onlyActiveOnIndex prop (IndexLink just wraps Link with this property for convenience).

<li><Link to="/" activeClassName="active" onlyActiveOnIndex={true}>Home</Link></li>

That's fine, but we already abstracted away having to know what the activeClassName is with Nav.

Remember, in NavLink we're passing along all of our props to Link with the {...spread} syntax, so we can actually add the prop when we render a NavLink and it will make its way down to the Link:

<li><NavLink to="/" onlyActiveOnIndex={true}>Home</NavLink></li>

---

Next: Clean URLs