nextui [BUG] - NextUIProvider navigate stills not being called

NextUI Version

2.4.6

Describe the bug

NextUIProvider navigate function is not calling the navigate function. Every time you click a link, it's reloading the whole page

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Install last version of @nextui-org/react Setup NextUIProvider with navigate property

Same as https://github.com/nextui-org/nextui/issues/3232

Expected behavior

As a user when I hit a link, it should load the content without reloading the whole page

Working as native next/link

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

Jul 29 '24 12:07 truediogo

ENG-1222 [BUG] - NextUIProvider navigate stills not being called

Jul 29 '24 12:07 linear[bot]

Please provide a minimal reproducible environment to demonstrate the issue.

Jul 29 '24 13:07 wingkwong

Please provide a minimal reproducible environment to demonstrate the issue.

package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@nextui-org/react": "^2.4.6",
    "framer-motion": "^11.3.18",
    "next": "14.2.5",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.5",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

layout.tsx (root)

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="light">
      <body className={inter.className}>
        <Providers>
          <main className="bg-neutral-50 min-h-svh">
            {children}
          </main>
        </Providers>
      </body>
    </html>
  );
}

providers.tsx

"use client";

import { NextUIProvider } from "@nextui-org/system";
import { useRouter } from "next/navigation";

export function Providers({ children }: React.PropsWithChildren) {
  const router = useRouter();

  return (
    <NextUIProvider navigate={router.push} locale="pt-BR">
      {children}
    </NextUIProvider>
  );
}

page.tsx (root)

import { Button, Link } from "@nextui-org/react";

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/apps">Apps</Link>
    </div>
  );
}

Jul 29 '24 14:07 truediogo

@truediogo I have made nextjs template app using nextui cli,
here is repo link,

kindly compare and see if there is any change which may be causing the error

the nexta-app template by nextui does not have any such error

Jul 29 '24 17:07 awesome-pro

Also came across this issue:

export const CommonProvider: FC<PropsWithChildren<CommonProviderProps>> = ({ children }) => {
	const router = useRouter()

	return (
		<NextUIProvider navigate={router.push}>
			<LayoutProvider>
				<AnalyticsProvider>
					<AuthenticationProvider>
						<TrpcProvider>{children}</TrpcProvider>
					</AuthenticationProvider>
				</AnalyticsProvider>
			</LayoutProvider>
		</NextUIProvider>
	)
}

Jul 30 '24 04:07 MariuszKogut

@truediogo I have made nextjs template app using nextui cli, here is repo link,

kindly compare and see if there is any change which may be causing the error

the nexta-app template by nextui does not have any such error

Off course that is working, you are using next/link

In the docs shows that is suposed to work with @nextui-org/link https://nextui.org/docs/components/link#routing

Jul 30 '24 13:07 truediogo

Also, same problem with tabs https://nextui.org/docs/components/tabs#links

Jul 31 '24 19:07 truediogo

Have the same issue with App Router. In 2.4.x at least, it's never worked for me, so I've just passed in NextLink to as when needed.

Aug 01 '24 23:08 alexnguyennz

for those having this issue, please provide a minimal reproducible environment for us to investigate.

Aug 02 '24 00:08 wingkwong

https://github.com/decahedron1/nextui-navigate-repro

Notice how, when using regular <Link>s for navigation, it properly logs Navigate: /x in the console and the navigation is performed client-side, but using <Tab>s with an href prop does not do this and instead causes a full page reload.

Aug 02 '24 01:08 decahedron1

I had similar experience using Nextjs 14.x with AppRouter. Maybe this can help anyone:

i just placed the Tabs in layout.tsx instead of page.tsx. Anyone can explain why this is working? (i am new to Nextjs). Now the animations are working as expected, no page reload. Looks great.

Notice that i have to use Link of @nextui-org/react, too.

I can provide a minimal example tomorrow if it can help.

Using layout.tsx which includes Client component containing:

<Tabs
          selectedKey={pathname}
          defaultSelectedKey={`/dashboard/projects/${project.id}`}
          aria-label="Project Tabs"
          variant="underlined"
        >
          <Tab
            as={Link}
            title="Overview"
            key={`/dashboard/projects/${project.id}`}
            href={`/dashboard/projects/${project.id}`}
          />
          <Tab
            as={Link}
            title="Pages"
            key={`/dashboard/projects/${project.id}/pages`}
            href={`/dashboard/projects/${project.id}/pages`}
          />
 </Tabs>

UPDATE: I think my issue with the page.tsx was that there are multiple instances, right? With the layout.tsx there is only one instance of the Tabs, so it works. Placing the Tabs in multiple page.tsxs results in creating new instances of the Tab component it self?

But using Link is still required :)

Aug 02 '24 02:08 josh1va

I'm also having this issue. I will assume that the other's reproductions are enough.

Next: 14.2.5 @nextui-org/link: 2.0.34

Even something as simple as the below still demonstrates the issue.

import { Link } from "@nextui-org/link";

// layout.tsx
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`w-dvw h-dvh`}>
        <Providers>
          <div>
            Hello
            <Link href="/submissions">link</Link>
          </div>
        </Providers>
      </body>
    </html>
  );
}

Also, wrapping router.push confirms it's never called:

// providers.tsx
"use client";

import { NextUIProvider } from "@nextui-org/system";
import { useRouter } from "next/navigation";
import { useCallback } from "react";

export function Providers({ children }: { children: React.ReactNode }) {
  const router = useRouter();

  const navigate = useCallback(
    (href: string, options?: any) => {
      console.log(`Navigate called with href: ${href}`, options);
      return router.push(href, options);
    },
    [router]
  );

  return <NextUIProvider navigate={navigate}>{children}</NextUIProvider>;
}

Aug 02 '24 07:08 saevarb

@saevarb @truediogo as per my observation of Link component it is working fine, routing in client side without any re-rendering
This was my code for test and It works as expected (set up via NextUI CLI App Router

provider.tsx

"use client";

import * as React from "react";
import { NextUIProvider } from "@nextui-org/system";
import { useRouter } from "next/navigation";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { ThemeProviderProps } from "next-themes/dist/types";

export interface ProvidersProps {
  children: React.ReactNode;
  themeProps?: ThemeProviderProps;
}

export function Providers({ children, themeProps }: ProvidersProps) {
  const router = useRouter();

  return (
    <NextUIProvider
      navigate={(path: string) => {
        console.log("Navigate to the path:", path);
        router.push(path);
      }}
    >
      <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
    </NextUIProvider>
  );
}

/page.tsx

import { Link as NextLink } from "@nextui-org/link";
import Link from "next/link";

export default function Home() {
  return (
    <div className="flex flex-col gap-5">
      <Link href="/docs/test">Next Native Link For Docs Link</Link>

      <br />
      
      <NextLink href="/docs/test">NextUI Link For Docs Test</NextLink>
    </div>
  );
}

/docs/test/page.tsx

import { Link as NextLink } from "@nextui-org/link";
import Link from "next/link";
import React from "react";

function Page() {
  return (
    <div className="flex flex-col gap-5">
      <Link href="/">Next Native Link for Home</Link>
      <br />
      <NextLink href="/">NextUI Link for Home</NextLink>
    </div>
  );
}

export default Page;

https://github.com/user-attachments/assets/14af9627-79d0-4d83-99c2-b6ce65d466c0

Kindly check if you have any configuration issues, or need to clean node_modules, rebuild etc.

I have also reproduced the issue with Tabs component and will help you all soon.

Aug 02 '24 17:08 awesome-pro

@awesome-pro I have tried deleting node_modules, tried building and running the production build, etc. The problem still persists. I will see if I can create a real, isolated reproduction later this week. In the meantime, I'm just using next's Link and far as I can see, there is no downside(even when using as={Link} for e.g. Button). Am I missing something? Accessibility?

Aug 03 '24 12:08 saevarb

@saevarb I am using this NextUI template for testing purpose, Kindly compare and see if it differs in some configuration/version from your project, which may be causing the error

Aug 04 '24 07:08 awesome-pro

NextUI template

With repo that you provided, same problem when using yarn

I've see the bun.lockb, so i run bun install, links works, but tabs same problem.

--

Also, i've double check the version of packages @nextui-org/tabs @nextui-org/link @nextui-org of my project and it's the same of the example

Aug 06 '24 11:08 truediogo

Adding RouterProvider under NextUIProvider seems to fix this issue.

Strange behavior though, since NextUIProvider adds RouterProvider automatically.

// providers.tsx
"use client"

import {NextUIProvider} from "@nextui-org/react"
import {RouterProvider} from "@react-aria/utils"
import {useRouter} from "next/navigation"

export default function Providers({children}) {
    const router = useRouter()

    return (
        <NextUIProvider>
            <RouterProvider navigate={router.push}>
                {children}
            </RouterProvider>
        </NextUIProvider>
    )
}

Aug 21 '24 06:08 kimcore

@kimcore can you share the versions? I can still reproduce the issue with your given code.

Aug 21 '24 07:08 wingkwong

I'm using latest versions for all dependencies (using pnpm)

"@nextui-org/react": "^2.4.6",
"@react-aria/utils": "^3.25.2",
"next": "14.2.5"

I tried adding RouterProvider in awesome-pro's test repo, but it didn't work as expected. So I tried using different package managers:

navigate works?	Tab	Link
bun, without RouterProvider	No	Yes
bun, with RouterProvider	Yes	No
pnpm, without RouterProvider	No	Yes
pnpm, with RouterProvider	Yes	Yes
yarn, without RouterProvider	No	No
yarn, with RouterProvider	Yes	No
npm, without RouterProvider	No	Yes
npm, with RouterProvider	Yes	No

For bun, I had to delete bun.lockb file to make Tab work
rm -rf'd .next directory between each test, node_modules directory between package managers
Installed @react-aria/utils before adding RouterProvider code

Strangely, only pnpm works with this workaround.

Aug 21 '24 08:08 kimcore

I'm using latest versions for all dependencies (using pnpm)
"@nextui-org/react": "^2.4.6",
"@react-aria/utils": "^3.25.2",
"next": "14.2.5"
I tried adding RouterProvider in awesome-pro's test repo, but it didn't work as expected. So I tried using different package managers:

navigate works? Tab Link bun, without RouterProvider No Yes bun, with RouterProvider Yes No pnpm, without RouterProvider No Yes pnpm, with RouterProvider Yes Yes yarn, without RouterProvider No No yarn, with RouterProvider Yes No npm, without RouterProvider No Yes npm, with RouterProvider Yes No

For bun, I had to delete bun.lockb file to make Tab work

rm -rf'd .next directory between each test, node_modules directory between package managers

Installed @react-aria/utils before adding RouterProvider code

Strangely, only pnpm works with this workaround.

Why is there such a significant difference between different package managers?

Aug 30 '24 14:08 baijunjie

I'm using latest versions for all dependencies (using pnpm)
"@nextui-org/react": "^2.4.6",
"@react-aria/utils": "^3.25.2",
"next": "14.2.5"
I tried adding RouterProvider in awesome-pro's test repo, but it didn't work as expected. So I tried using different package managers: navigate works? Tab Link bun, without RouterProvider No Yes bun, with RouterProvider Yes No pnpm, without RouterProvider No Yes pnpm, with RouterProvider Yes Yes yarn, without RouterProvider No No yarn, with RouterProvider Yes No npm, without RouterProvider No Yes npm, with RouterProvider Yes No

For bun, I had to delete bun.lockb file to make Tab work

rm -rf'd .next directory between each test, node_modules directory between package managers

Installed @react-aria/utils before adding RouterProvider code

Strangely, only pnpm works with this workaround.
Why is there such a significant difference between different package managers?

i think that even the creators doesn't know, last update, may 2024

Sep 03 '24 17:09 truediogo

Has this been solved by NextUI? I'm currently using RouterProvider to work around this issue but I'd prefer not to bring in the additional dependency

Sep 16 '24 15:09 skycoop

The bug is still here with Tabs, NextUI v2.4.8 with Next 14

Nov 28 '24 23:11 imadyaici

The bug is still here with Tabs, NextUI v2.4.8 with Next 14

In my case (and as @truediogo also highlighted) next/link works fine, so as a workaround I use it for internal links and tabs, and use @nextui-org/link for external links like so:

import { Link } from "@nextui-org/link";
import NextLink from "next/link";

...
<Link isExternal href="https://myveryimportanturl.com" title="nevermissthetitle">
    <span>Check this</span>
</Link>

<NextLink href="/privacy" title="Privacy Policy">
    <span>Privacy</span>
</NextLink>

<Tabs aria-label="Options" selectedKey={pathname}>
    <Tab key="/dashboard" as={NextLink} href="/dashboard" title="Dashboard">
        <DashboardTab />
    </Tab>
...

Note the as={NextLink} attribute on <Tab/>.

Nov 29 '24 21:11 kisszoltan

This problem keeps happening. This issue needs to be reopened.

Dec 03 '24 02:12 stefanosandes

Still happening here as well.

Jun 27 '25 17:06 kirilledelman

@kirilledelman are you using latest version?

Jun 28 '25 03:06 wingkwong

@kirilledelman are you using latest version?

I needed to use Tailwind 4, so I went with "@heroui/react": "^2.8.0-beta.10". Yes it's still happening for me, so I used a workaround I found here:

<HeroUIProvider>
            <RouterProvider navigate={router.push}>
                {children}
            </RouterProvider>
        </HeroUIProvider>

Without adding <RouterProvider> the page reloads whenever I navigate using HeroUI's <Link>.

Jun 28 '25 17:06 kirilledelman

@kirilledelman it should be fixed in latest beta version.

Jul 11 '25 15:07 wingkwong