Is there a new way to use indexLink in React Router v4? I am updating some version 3 code.
I'm bringing it in with some destructuring:
var {NavLink, IndexLink} = require('react-router-dom');
and using IndexLink to keep it from being bold all the time:
<h2>Nav</h2>
<IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>blah blah blah</IndexLink>
//Other navlinks working fine
IndexLink is the only thing breaking my code, here is an error from when I change it to that.
"Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of
Nav
."
Everything is exported, and the simple app works perfectly until I add IndexLink. Now to pass out.
<Indexlink>
doesn't exist in RRv4 because <IndexRoute>
and the whole concept of indexes doesn't really exist in RRv4. Remember that Links and Routes are directly related.
So instead, just use <NavLink>
.
Have a read about NavLink on the official docs:
NavLink
- A special version of the that will add styling attributes to the rendered element when it matches the current URL.
If you need more control over the URL matching, you can use the strict
or exact
props.
Per Chris, the correct answer was to continue to use NavLink and use exact. Strict did not work in this case.
<NavLink exact to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>chris is awesome</NavLink>
Just in case another comes across this!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With