4.0.0
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link,
NavLink
} from 'react-router-dom'
import { connect } from 'react-redux'
class Nav extends React.Component {
render() {
return (
<ul>
<li><NavLink exact to="/" activeClassName="is-selected">Home</NavLink></li>
<li><NavLink to="/about" activeClassName="is-selected">About</NavLink></li>
<li><NavLink to="/topics" activeClassName="is-selected">Topics</NavLink></li>
</ul>
);
}
}
var ConnectedNav = connect((state) => {
return {};
})(Nav);
const BasicExample = () => (
<Router>
<div>
<ConnectedNav />
</div>
</Router>
)
export default BasicExample;
activeClassName should be applied to current NavLinks
As you navigate around nothing activeClassName is not applied, isActive method is not called, etc.
Please see our guide to dealing with blocked updates. Also, react-redux v5 is going to stop blocking updates using shouldComponentUpdate, AFAICT.
Most helpful comment
Please see our guide to dealing with blocked updates. Also, react-redux v5 is going to stop blocking updates using
shouldComponentUpdate, AFAICT.