New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Active class not being added to NavLinks on active pages on v4.3.1 #6201
Comments
Can you put something together on codesandbox.io? This needs a repro to be diagnosed. |
I wasn't able to reproduce it on codesandbox or a barebones app I created. Both worked fine using the same dependency versions... |
I'm encountering the same issue w/ 4.3.1, but likewise have not been able to reproduce it in a simple app - will be sure to update here if I can get a basic reproduction. |
I'm also seeing this after upgrading from Workaround: pass a function to the 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> |
Can anyone create a reproduction of this on codesandbox.io or just point to a repo with the issue? There really needs to be more code to look at to diagnose what's going on. My best guess is the new path escaping, but that's purely a guess at this point. |
@timdorr I'm running into the issue as well. By using the react-devtools extension, I could see that the Route returned by NavLink has an extra backslash at the beginning of the path. You can test it in your browser console // https://github.com/ReactTraining/react-router/blob/ae35a273bdb0fdd2fec32893ed1a62630da8bf3b/packages/react-router-dom/modules/NavLink.js#L25
'/foo'.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1")
// using OSX returns "\/foo" in Chrome or "\\/foo" in FireFox + Safari idk about windows/ie |
We've had this issue reported by someone using tabler-react. There is reproducing codesandbox here. If we move the |
I just took a quick look at those two sandboxes and the broken one works when I refresh it, which is weird but I don't know if it has anything to do with the issue. If I take out the If someone can put together a barebones (just React Router and host components) sandbox that duplicates the issue, it would be appreciated. |
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 |
I put something together here that doesn't recreate the issue: https://codesandbox.io/s/0p78xv2v5p In NavLink.js, I put both the 4.2 and 4.3 versions of NavLink in there. Both work just fine... I'm now wondering if it has to do with #5964. |
I think its related to #6193. |
So when I was debugging and it is the first time I've really looked at the code, I stripped it back to one route on "/". It initially found a match but then it seemed to render another route for the children of the component defined in the route with a weird |
@pshrmn I'm pretty sure this is only ssr related |
@jonthomp I just took a closer look at To everyone else in this thread: can someone please put together a small repo or sandbox? |
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 |
@dotspencer React Router's
Your Webpack configuration is set to resolve directly from the root 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) |
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. |
- correctif dans la config webpack qui entrainait un bug dans react-router (remix-run/react-router#6201)
I'm not sure if this is related to this issue. But when I use relative path, the For example,
Active class is not applied.
Active class is applied. The url routes to the correct path but no active class. |
I ran into the same issue but could not use the generalized
|
This comment has been minimized.
This comment has been minimized.
Escaping path in NavLink seems to be not needed as reverting this seems to fix it for me |
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 ? |
Any news on this? I'm using a mono-repo with Express and Create-react-app so the only solution so far seems to be to eject, which I'd rather avoid (In that case it seems simpler to use the function in NavLink to do the comparison manually). |
@GothBarbie it seams that this issue is fixed with 4.4.0-beta builds (I have switched to 4.4.0-beta.6) |
Original issue: remix-run/react-router#6201
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> |
@paustria were you able to solve this? the URL routes but no active class is applied... |
@Ameer157 I'm currently solving by not using |
Hi @esbenvb, I can't get this workaround to work for some reason, the active class is still bugged... P.S. what is: |
I thought this might be fixed in v5 but it is not. I still have to use the workaround shown above by apvilkko |
@esbenvb I'm having this problem too. Haven't tried it but couldn't you have |
Version 5.0.0 fixed this. Thanks! |
I don't see how this got fixed in 5.0.0. I have links like <Link to="page" activeClassName="active">Link</Link> which gets resolved (correctly) to <a href="/products/product-name-1/page">Link</a> and when I'm on |
@wojtekmaj have you tried |
@dagda1 I have only one copy of path-to-regexp in my repo, and it's exactly 1.7.0. |
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. |
i had this problem on 5.0.1. i’m fairly sure it was getting clobbered by webpack-dev-server’s express reference |
Passing in a callback to isActive, the match argument is returning null, location is fine. activeClass and activeStyle are not working for me. |
@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 Create react app is making This only happened on a production build. my fix was
A match was then magically found. |
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. |
don’t update to the latest package. update to npm i path-to-regexp@1.7.0 -S |
Please consider reopening the issue as the exact same reported issue happens when pre-rendering SPA also |
Version
Upgraded react-router-dom from 4.2.2 → 4.3.1
Node v8.11.2
npm v5.6.0
With the following dependencies:
Steps to reproduce
After upgrading, the
'active'
class is no longer applied to the<NavLink/>
for active pages. I've tried explicitly adding theactiveClassName
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:
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:
JSX and HTML:
<NavLink exact={true} to="/" className="img-link">
↓
<a class="img-link" href="#/">
The text was updated successfully, but these errors were encountered: