-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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
[BUG] - Links is not working with react-router-dom #2963
Comments
I also found the same issue days ago. Somehow it works when I link to local nextui Link package. Probably it is due to some upgraded internal react aria versions messing up. May wait for the next release to see if this is resolved or not. |
@wingkwong Do we have any expected date for the next release? because it has broken all my website links!! |
@tareq96 I don't have the date yet since we still got several PR reviews going on. At the same time, can you use the downgraded version instead? I just tested the following version could resolve the problem.
|
will do, thanks @wingkwong |
I can confirm that this issue completely breaks a Remix js web app. We upgraded to the latest nextui, and our whole platform stopped functioning because of broken links. Please prioritize, if possible! 🙏 P.S.: @wingkwong thanks for suggesting the workaround, but in Remix, this triggers full page reload, unfortunately. I'm guessing the error comes from the next ui provider – does it memoize the navigate function, by any chance? |
We've also hit the issue with our Nextjs app. I assume these are related, although it's possible that it's just a coincidence. After spending some time inside the nextjs code, I found the link/path was being passed in as undefined. Looking into the NextUI docs (here), I decided to validate at the <NextUIProvider
navigate={(...args) => {
console.log("NextUIProvider.navigate", ...args);
return router.push(...args);
}}
> Output from clicking on a link, e.g.,
|
@johnmangan yep, exactly this! Here's a stackblitz repro: https://stackblitz.com/edit/remix-run-remix-nrotvl?file=app%2Froot.tsx cc @wingkwong |
I've also tested with the above remix repo. I couldn't reproduce the issue with the following canary versions. Hence, the fix will be available in the next release.
|
This comment was marked as outdated.
This comment was marked as outdated.
@wingkwong i've just added these lines to package.json
and the error is still there, I'm afraid! https://stackblitz.com/edit/remix-run-remix-nrotvl?file=package.json |
@maxprilutskiy Sorry for not making it clean. You need to update the import lines as well in order to use the canary packages. menu.tsx - import { Link } from '@nextui-org/react';
+ import { Link } from '@nextui-org/link'; root.tsx - import { NextUIProvider } from '@nextui-org/react';
+ import { NextUIProvider } from '@nextui-org/system'; or check my forked stackblitz: https://stackblitz.com/edit/remix-run-remix-quqyzd
we rescheduled to 24th May. |
@wingkwong thanks for sharing the example! Links now indeed trigger navigation, but I'm afraid they now cause the page to reload entirely. Can you confirm you see the same? |
Can also confirm that after downgrading to the Link version 2.0.22 the passed path is no longer undefined but a full page reload is happening. Using newly created next 14 project. |
@maxprilutskiy confirmed it would cause full page reload even with canary versions. will investigate it. @niclas-j I couldn't reproduce on next 14 project. Can you share the stackblitz project? also have you tried the above canary versions? |
can confirm downgrading to @wingkwong not sure if the issue has anything to do with these changes but thought I'd share in case helpful: |
@MerryOscar Please note that downgrading is just a workaround until the next release (target: 24th May). |
Stackblitz wont load for me right now, here I uploaded it as a repo: Note that I also tried |
still not working |
@deyvtech can you provide your repo or stackblitz project? |
closing - please use the latest version (v2.4.0) |
NextUI Version
2.3.6
Describe the bug
I'm using Vite with React ts template and react-router-dom for routing.
When I switched to the latest version of NextUI, the links stopped working.
Your Example Website or App
No response
Steps to Reproduce the Bug or Issue
Just adding any link
Expected behavior
The expected behavior is to make the links navigate to the right URL without reloading the page.
Screenshots or Videos
No response
Operating System Version
macOS
Browser
Chrome
The text was updated successfully, but these errors were encountered: