[BUG] - next/link with next ui button does a full page refresh on click

[SeccoMaracuja]

Describe the bug

next/link with @nextui-org/react button as child does a full page refresh on click.

Your Example Website or App

https://stackblitz.com/edit/nextjs-wwzypa?file=pages/index.js
(You have to press Open in New Tab on stackblitz to see the bug.)

Steps to Reproduce the Bug or Issue

This is my Code:

<Link href="/equipment">
     <Button color="primary">
        <Text size={"$xs"}>
            Equipment
        </Text>
     </Button>
</Link>

I tried also:

<Link href="/equipment" passhref>
     <Button color="primary">
        <Text size={"$xs"}>
            Equipment
        </Text>
     </Button>
</Link>

If I swap the link with the button like the following. The page will route client side without a full refresh on click. But I have to click on the button text. If I click on the button border or padding nothing will happen.

<Link href="/equipment" passhref>
     <Button color="primary">
        <Text size={"$xs"}>
            Equipment
        </Text>
     </Button>
</Link>

I use next js 12.

My package.json contains the following:
"react": "18.2.0",
"react-dom": "18.2.0",
"next": "13.2.4",
"@nextui-org/react": "^1.0.0-beta.12",

Expected behavior

I want to use next/link with @nextui-org/react button to route client side to another page without a full page refresh.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[SohamSen15]

The Link component is styled to resemble a hyperlink and semantically renders an <a> tag. To achieve your desired result, you have to use a library like react-router.

[tarek-hassan-FE]

@SeccoMaracuja
I think this is related to the fact that @nextui-org/react/ Button is a functional component and in the Next.js/ Link docs there is a special handling for functional components, please refer to this to understand more Next.js/Link functional component child.

However, I tried to handle it the way it was described in the docs with no success, but maybe you can give it a try.

The only thing that worked and didn't refresh the page but instead did a client-side routing was redirecting using Next.js/ Router like so

import { Button } from '@nextui-org/react';
import { useRouter } from 'next/router';
function Home() {
  const router = useRouter();
  const handleOnPress = () => {
    router.push('equipment');
  };
  return (
    <>
      Home site
      <Button onPress={handleOnPress}>Equipment</Button>
    </>
  );
}

Hope this was helpful

[SeccoMaracuja]

Thank you @Dodger23 and @SohamSen15 for your replies.

@Dodger23 I tried it out but with no success too.

According to this site in chakra UI you can use passHref in the link and as="a" in the button. But if I do this with the next ui button I get a hydration error.

I think I will use the next/router solution.

[jrgarciadev]

Hey guys sorry for the delay please upgrade to V2.

import {Button} from  "@nextui-org/react"
import NextLink from "next/link";
....
<Button as={NextLink} href="/link-to-navigate">My Button Link</Button>
...