[BUG] - React Browser Router - Link always reload whole page

[komenixx]

HeroUI Version

2.7.2

Describe the bug

useNavigate has no effect on how Link component handle routing behavior.

App.tsx

import {Suspense, lazy} from 'react'
import {Navigate, NavigateOptions, Route, Routes, useNavigate} from 'react-router-dom'
import {HeroUIProvider} from '@heroui/react'
import Suspenser from '@ui/suspenser.tsx'

declare module '@react-types/shared' {
  interface RouterConfig {
    routerOptions: NavigateOptions
  }
}

function App() {
  const navigate = useNavigate()

  return (
      <HeroUIProvider navigate={navigate}>
        <Suspense fallback={<Suspenser />}>
          <Routes>
              <Route element={<SignInPage />} path="/auth" />
              <Route element={<SignInPage />} path="/auth/sign-in" />
              <Route element={<SignOutPage />} path="/auth/sign-out" />
              <Route element={<ForgotPasswordPage />} path="/auth/forgot-password"/>
              <Route element={<SetNewPasswordPage />} path="/auth/set-new-password"/>
              <Route element={<NotFoundPage />} path="*" />
          </Routes>
        </Suspense>
      </HeroUIProvider>
  )
}

Component.tsx

import React, {useContext, useEffect} from 'react'
import {Button, Link, Spacer} from '@heroui/react'

export default function Comp() {

  return <Button as={Link} href={'/auth/sign-in'} variant="light">
    Sign In
  </Button>
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Set up Browser Router module from react-router-dom
2. Click on Link or Button with as Link attribute
3. Whole page will reload

Expected behavior

I expect browser routing behavior without reload whole page.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-2129 [BUG] - React Browser Router - Link always reload whole page

[iSaulX]

Hey there! This is not a bug. There's two ways to fix this.
The first one is just importing Link from react-router instead of using Link from HeroUI. Something like this:

import {Link} from "react-router-dom"; 

export default function YourButton(){
    return (
           <Button as={Link} to="/yout/path">Button</Button>
   )
}

And the other one it's using useNavigate and useHref from React Router and setting up in the Global Provider.

import type {NavigateOptions} from "react-router-dom";

import {BrowserRouter, useNavigate, useHref} from "react-router-dom";
import {HeroUIProvider} from "@heroui/react";

declare module "@react-types/shared" {
  interface RouterConfig {
    routerOptions: NavigateOptions;
  }
}

function App() {
  const navigate = useNavigate();

  return (
    <HeroUIProvider navigate={navigate} useHref={useHref}>
      {/* Your app here... */}
      <Routes>
        <Route path="/" element={<HomePage />} />
        {/* ... */}
      </Routes>
    </HeroUIProvider>
  );
}

PD: I think you're missing adding useHref of your global provider.

Take a look to the docs setting up React Router with HeroUI. documentation

[wingkwong]

@komenixx Please try to add useHref to your provider and make sure you are using the latest versions. If it still fails, please provide a sandbox for us to investigate. Thanks.

[komenixx]

@wingkwong adding useHref had no effect.

I simply override default HeroUI. Working solution is using Link from react-router-dom, by @iSaulX

[AhmedLukman]

Same issue in Next.js regarding full page reloads. Here is a summary: in providers.tsx:

"use client";

import { useRouter } from "next/navigation";
import { HeroUIProvider } from "@heroui/system";

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

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

then when using in component:

import { Link } from "@heroui/link";
import { Button } from "@heroui/button";

<Button as={Link} href="existing-route-in-the-site">Test</Button>

[AhmedLukman]

Works now, update everything of heroui to latest