indexLink in React Router v4

Question

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.

I'd really recommend having a proper read of the RRv4 docs - the API in the new version is fundamentally different. — Joe Clay
– Joe Clay, Commented Mar 22, 2017 at 13:52
I definitely had a read before coming here. A 2 hour search through the docs and google on no sleep might not qualify as 'proper' though! :D — DORRITO
– DORRITO, Commented Mar 22, 2017 at 18:26

Sender · Accepted Answer · 2019-02-07 10:33:26Z

18

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

edited Feb 7, 2019 at 10:33

Sender

6,90812 gold badges49 silver badges69 bronze badges

answered Mar 22, 2017 at 13:48

Chris

59.7k20 gold badges121 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DORRITO Over a year ago

Thanks! I still have to fix it, but that's the gist of what I needed to know. I actually had it as Navlink before trying IndexLink. Could have been sleep deprivation, but I could't find that index was gone in the documentation. Appreciate it.

DORRITO · Accepted Answer · 2017-03-22 18:35:07Z

12

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!

answered Mar 22, 2017 at 18:35

DORRITO

6612 gold badges9 silver badges25 bronze badges

Collectives™ on Stack Overflow

indexLink in React Router v4

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related