React-router: In V4 router events don't seem to propagate into redux connected components

Created on 14 Mar 2017  路  1Comment  路  Source: ReactTraining/react-router

Version

4.0.0

Test Case

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;

Steps to reproduce

Expected Behavior

activeClassName should be applied to current NavLinks

Actual Behavior

As you navigate around nothing activeClassName is not applied, isActive method is not called, etc.

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.

>All comments

Please see our guide to dealing with blocked updates. Also, react-redux v5 is going to stop blocking updates using shouldComponentUpdate, AFAICT.

Was this page helpful?
0 / 5 - 0 ratings