Indexlink in React Router v4

Question

rookie here. Is there a new way to use indexLink in React Router v4? I am updating some version 3 code (I thought I got out of the corner to avoid all this obsolescence!)

I bring this with some destructuring:

var {NavLink, IndexLink} = require('react-router-dom'); 

and using IndexLink so that it does not appear in 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 that violates my code, here is the error from the moment I change it to this.

"Warning: React.createElement: type is invalid - expected a string (for built-in components) or a class / function (for composite components), but received: undefined. Most likely, you forgot to export your component from the file that it defined in. Check the method renderings Nav . "

Everything is exported, and a simple application works fine until I add IndexLink. Now to get through.

Answer 1

<Indexlink> does not exist in RRv4 because <IndexRoute> and the whole concept of indexes do not actually exist in RRv4. Remember that links and routes are directly related.

So instead, just use <NavLink> .

Read about NavLink in white papers:

NavLink is a special version that adds style attributes to the displayed element when it matches the current URL.

If you need more control over URL compliance, you can use strict or exact props.

Answer 2

Per Chris, the correct answer was to keep using NavLink and use the exact one . Strict did not work in this case.

 <NavLink exact to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>chris is awesome</NavLink> 

Just in case, it comes!