[BUG] - Links is not working with react-router-dom

[tareq96]

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

[linear]

ENG-804 [BUG] - Links is not working with react-router-dom

[wingkwong]

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.

[tareq96]

@wingkwong Do we have any expected date for the next release? because it has broken all my website links!!

[wingkwong]

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

"@nextui-org/link": "2.0.22"

[tareq96]

will do, thanks @wingkwong

[maxprilutskiy]

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?

[johnmangan]

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 level. I changed <NextUIProvider navigate={router.push}> into

<NextUIProvider
  navigate={(...args) => {
    console.log("NextUIProvider.navigate", ...args);
    return router.push(...args);
  }}
>

Output from clicking on a link, e.g., <Link href="/fubar"> is:

NextUIProvider.navigate undefined undefined

[maxprilutskiy]

@johnmangan yep, exactly this!

Here's a stackblitz repro: https://stackblitz.com/edit/remix-run-remix-nrotvl?file=app%2Froot.tsx

cc @wingkwong

[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.

"@nextui-org/link": "0.0.0-canary-20240520130845",
"@nextui-org/system": "0.0.0-canary-20240520130845",

[maxprilutskiy]

@wingkwong i've just added these lines to package.json

  "resolutions": {
    "@nextui-org/link": "0.0.0-canary-20240520130845",
    "@nextui-org/system": "0.0.0-canary-20240520130845"
  }

and the error is still there, I'm afraid!

https://stackblitz.com/edit/remix-run-remix-nrotvl?file=package.json

[wingkwong]

@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

any rough estimate when the new version will be rolled out? could help with planning on our side.

we rescheduled to 24th May.

[maxprilutskiy]

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

[niclas-j]

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.

[wingkwong]

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

[MerryOscar]

can confirm downgrading to "@nextui-org/link": "2.0.22" solved the issue for me.

@wingkwong not sure if the issue has anything to do with these changes but thought I'd share in case helpful:

• Add support for routerOptions and useHref adobe/react-spectrum#5864
• Support use of external links when using useHref in RouterProvider adobe/react-spectrum#6397
• Fix synthetic links not using useHref adobe/react-spectrum#6346

[wingkwong]

@MerryOscar Please note that downgrading is just a workaround until the next release (target: 24th May). useHref was introduced in 1st May '24 release of React Aria which our current version (or the next version) of NextUI hasn't integrated with. I've a draft PR for that already and we plan it to integrate with updated react aria version on 2.5.0 tentatively.

[niclas-j]

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

Stackblitz wont load for me right now, here I uploaded it as a repo:
https://github.com/niclas-j/next-ui-navigation-bug

Note that I also tried "@nextui-org/link": "2.0.22", + @nextui-org/system": "2.1.0

[deyvtech]

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

"@nextui-org/link": "2.0.22"

still not working

[wingkwong]

@deyvtech can you provide your repo or stackblitz project?

[deyvtech]

https://github.com/deyvtech/FashionNexus

[wingkwong]

closing - please use the latest version (v2.4.0)