react-router: Active class not being added to NavLinks on active pages on v4.3.1

@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)

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>

I’m not sure if this is related to this issue. But when I use relative path, the activeClassName is not applied.

For example,

<NavLink
    to="./test"
    activeClassName="is-active"
    exact={true}
>
     Test
</NavLink>

Active class is not applied.

<NavLink
    to="/test"
    activeClassName="is-active"
    exact={true}
>
     Test
</NavLink>

Active class is applied.

The url routes to the correct path but no active class.

@pshrmn I’m pretty sure this is only ssr related

@jonthomp I just took a closer look at tabler-react and the <Nav.Item> is a pure component, so when the location changes, the <NavLink>s aren’t being re-rendered (the blocked updates problem). That will go away when RR adopts the new context, but isn’t the same issue as other people are experiencing.

To everyone else in this thread: can someone please put together a small repo or sandbox?

Same issue here with 4.3.1, I have an ssr app and the class is being added from the code rendered on the server but not when changing views on the client.

I rolled back to 4.2.2 and all is now good.

I tried to debug and match was always null in NavLink at this location.

@eulow that is the behviour I experienced, I implemented my own isActive and noticed no matter what I did a match was not found. I even ran the latest path-to-regexp locally through the node console with the same arguments and a match was found.

Are you using react-scripts or create react app?

I think the path-to-regexp is still getting clobbered by webpack-dev-server’s express reference in some circumstances.

Create react app is making react-scripts a dependency and not a devDependency.

This only happened on a production build.

my fix was

npm i path-to-regexp@1.7.0 -S

A match was then magically found.

I ran into the same issue but could not use the generalized 'node_modules' workaround. Instead, I hard-coded path-to-regexp to always resolve to the newer version via alias.

resolve: {
  alias: {
    'path-to-regexp': path.resolve(
        __dirname, 'node_modules', 'react-router', 'node_modules', 'path-to-regexp'
    )
  },
  modules: {...}
}

I thought this might be fixed in v5 but it is not. I still have to use the workaround shown above by apvilkko

Until 4.4 is stable, I’m using this workaround… It’s not ideal since I have to specify the path twice when calling the component.

const matchWorkaround = (pathname) => (isMatch, location) => isMatch || location.pathname.startsWith(pathname);

const AccountMenu: React.SFC<IProps> = ({ accountNumber, isAdvisor }: IProps) => (
    <div style={styles.wrapper}>
        <NavLink
            activeStyle={styles.active}
            style={styles.menuItem}
            to={`/banklink/accounts/${accountNumber}/current-allocation`}
            isActive={matchWorkaround(`/banklink/accounts/${accountNumber}/current-allocation`)}
        >
            Formuesammensætning
        </NavLink>
        <NavLink
            activeStyle={styles.active}
            style={styles.menuItem}
            to={`/banklink/accounts/${accountNumber}/deposit-allocation`}
            isActive={matchWorkaround(`/banklink/accounts/${accountNumber}/deposit-allocation`)}
        >
            Fordeling af nye indskud
        </NavLink>

@gothbarbie it seams that this issue is fixed with 4.4.0-beta builds (I have switched to 4.4.0-beta.6)

don’t update to the latest package. update to

npm i path-to-regexp@1.7.0 -S

react-router-dom@5.0.1 is the latest working package in 06/09/2019. Use this package so that you can experience the behavior mentioned in the documentation. activeClass problem is no more. 😃

Hey, I was wrong. Again I ran into the same problem in a different project. This time I found the real fix. Update your “path-to-regexp” package to latest as mentioned by @dagda1.

@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)

Hi @pshrmn , is there a way to get this worked if we not using webpack.config but instead using create-react-app to setup the react app. is ejecting the app only way to this fixed in this case ?

I ran into the same issue but could not use the generalized 'node_modules' workaround. Instead, I hard-coded path-to-regexp to always resolve to the newer version via alias.

resolve: {
  alias: {
    'path-to-regexp': path.resolve(
        __dirname, 'node_modules', 'react-router', 'node_modules', 'path-to-regexp'
    )
  },
  modules: {...}
}

Absolutely worked for me also. I would never have suspected that.

I have a mono repo. Still not entirely sure how this fixes it for the monorepo.

I created a small repo that reproduces the bug: https://github.com/dotspencer/react-router-bug

One curious thing I discovered is that the problem goes away when I move the express package from "dependencies" to "devDependencies" in package.json.

@pshrmn @dagda1 the issue is not SSR related for us

I think its related to https://github.com/ReactTraining/react-router/issues/6193.