Active class not being added to NavLinks on active pages on v4.3.1

Version

Upgraded react-router-dom from 4.2.2 → 4.3.1

Node v8.11.2 npm v5.6.0

With the following dependencies:

"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-router-dom": "^4.3.1",
"webpack": "^4.10.2",
"webpack-cli": "^3.0.1"

Steps to reproduce

After upgrading, the 'active' class is no longer applied to the <NavLink/> for active pages. I’ve tried explicitly adding the activeClassName prop to the component and it still doesn’t add the class the the element.

I haven’t been able to create a minimal verifiable example. Has anyone else seen this? Everything else works perfectly fine, builds like normal, but the active class isn’t added on the updated version.

Expected Behavior

It works as expected with v4.2.2 but not with v4.3.1 (or v4.3.0)

Additional Info

v4.2.2

Props being passed to NavLink:

activeClassName: "active"
ariaCurrent: "true"
children: Array[2]
className: "img-link"
exact: true
to: "/"

JSX and HTML:

<NavLink exact={true} to="/" className="img-link">  ↓ <a class="img-link active" aria-current="true" href="#/">

v4.3.1

Props being passed to NavLink:

activeClassName: "active"
aria-current: "page"
children: Array[2]
className: "img-link"
exact: true
to: "/"

JSX and HTML:

<NavLink exact={true} to="/" className="img-link">  ↓ <a class="img-link" href="#/">

[pshrmn]

@dotspencer React Router’s path-to-regexp dependency is v1.7.0 while Express’s is v0.1.7. During installation, the path-to-regexp dependency for Express is installed before the one for React Router, so you end up with a node_modules that looks like this:

node_modules
  express
  path-to-regexp@0.1.7
  react-router
    node_modules
      path-to-regexp@1.7.0

Your Webpack configuration is set to resolve directly from the root node_modules, so when you build your project you are building it with the old path-to-regexp. The solution, based on this comment is to use a generalized node_modules reference in your Webpack config.

  resolve: {
    modules: [
      path.resolve('./src'),
-     path.resolve('./node_modules'),
+    'node_modules',
    ],
  },

If anyone else is running into this issue and uses Express + Webpack, can you please verify if this fixes your problem. (cc @dagda1)

[jameswyse]

I’m also seeing this after upgrading from 4.2.2 to 4.3.1

Workaround: pass a function to the isActive prop to do the check manually, eg:

const isActive = (path, match, location) => !!(match || path === location.pathname);

<NavLink to="/my/path" 
         className="nav-link"
         activeClassName="nav-link--active"
         isActive={isActive.bind(this, '/my/path')}>
  Click Me 
</NavLink>