Search code examples
javascriptnode.jsreactjsreact-router

indexLink in React Router v4

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.

Solution

  • <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.