DORRITO DORRITO -4 years ago 227
React JSX Question

indexLink in React Router v4

rookie here. Is there a new way to use indexLink in React Router v4? I am updating some version 3 code (I thought I left angular to avoid all this deprecation!)

I'm bringing it in with some descructuring:

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.

Answer Source

<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 on the url matching, you can use the strict or exact props. Though you might not need those.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download