Steve Lindemann decb140c93 rackt->reactjs | 8 years ago | |
---|---|---|
.. | ||
modules | 8 years ago | |
README.md | 8 years ago | |
index.css | 8 years ago | |
index.html | 8 years ago | |
index.js | 8 years ago | |
package.json | 8 years ago | |
webpack.config.js | 8 years ago |
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.
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
PropertyWe 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>