[BUG] - Page unexpectedly reloading when I use react-router for client-side routing and href attribute on Tabs and Dropdown components

[drago-v]

NextUI Version

2.2.9

Describe the bug

I am using the Dropdown and Tabs components for routing in my application. I employ react-router for client-side routing, and I have set it up according to the instructions on the page https://nextui.org/docs/guide/routing.

When I pass the href attribute to the Link or Listbox components, routing works as expected. However, if the href attribute is passed to the Dropdown or Tabs components, it causes an unexpected page reload every time a Tab or DropdownItem is clicked.

You can see the issue in detail in the attached video. The code from the application in the video is provided below.

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.scss'
import AppTest from './AppTest.tsx'
import {BrowserRouter} from "react-router-dom";

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <BrowserRouter>
            <AppTest />
        </BrowserRouter>
    </React.StrictMode>,
)

AppTest.tsx

import {Route, Routes, useLocation, useNavigate} from 'react-router-dom';
import {
    NextUIProvider,
    Avatar, Link,
    Card, CardBody, CardHeader,
    Dropdown, DropdownItem, DropdownMenu, DropdownTrigger,
    Listbox, ListboxItem,
    Tab, Tabs
} from '@nextui-org/react';

const AppTest = () => {

    const navigate = useNavigate();
    const {pathname} = useLocation();

    return (
        <NextUIProvider navigate={navigate}>

            <div className="container p-5">

                <div className="flex justify-between mb-6">

                    <Tabs selectedKey={pathname}>
                        <Tab href="/" key="/" title="main" />
                        <Tab href="/user" key="/user" title="user" />
                    </Tabs>

                    <Dropdown>
                        <DropdownTrigger><Avatar /></DropdownTrigger>
                        <DropdownMenu>
                            <DropdownItem href="/">Main</DropdownItem>
                            <DropdownItem href="/user">User</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>

                </div>

                <Routes>

                    <Route path="/" element={<Home />} />

                    <Route path="/user" element={<User />} />

                </Routes>

                <Card className="mb-6">
                    <CardHeader className="text-sm text-success">
                        {'<Listbox>'} routing works fine without page reloading
                    </CardHeader>
                    <CardBody>
                        <Listbox>
                            <ListboxItem href="/" key="home">main</ListboxItem>
                            <ListboxItem href="/user" key="user">user</ListboxItem>
                        </Listbox>
                    </CardBody>
                </Card>

                <Card>
                    <CardHeader className="text-sm text-success">
                        {'<Link>'} routing works fine without page reloading
                    </CardHeader>
                    <CardBody>
                        <Link href="/">{'<Link href="/">'}</Link>
                        <Link href="/user">{'<Link href="/user">'}</Link>
                    </CardBody>
                </Card>

            </div>

        </NextUIProvider>
    );

}

const Home = () => {
    return <Card className="mb-6">
        <CardBody className="text-center font-bold">
            Some contents here
        </CardBody>
    </Card>
}

const User = () => {
    return <Card className="mb-6">
        <CardBody className="text-center font-bold">
            Some user related contents here
        </CardBody>
    </Card>
}

export default AppTest

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Set up client-side routing according to the instructions at https://nextui.org/docs/guide/routing.
2. Utilize the Dropdown or Tabs components. Specify the href attribute in the Tab or DropdownItem components.

Expected behavior

Expected Behavior: Navigating between different routes without reloading the application.

Actual Result: Page reloads when using the href attribute in DropdownItem and Tab.

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/20705877/a6b2f9c8-114c-48d4-824d-add697c50777

Operating System Version

MacOS

Browser

Chrome

[BasitAli]

Just ran into this and initially used onSelectionChange to manually push the router page, but while playing with other components specifically Button, found out that all you need is as={Link} on the <Tab component to make it work.

[wingkwong]

Fixed in https://github.com/nextui-org/nextui/pull/3240