search

gluestack / gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
https://gluestack.io/
MIT License
2.65k stars 118 forks source link

Button component breaks cliend-side navigation when used in Next.js' Link component #2452

Closed ruckerzerg closed 3 weeks ago

ruckerzerg commented 1 month ago

Description

Button component breaks cliend-side navigation when used in Next.js' Link component

gluestack-ui Version

2

Platform

Additional Information

On click it triggers a full page reload instead of handling it on the client side.

vaibhk20 commented 1 month ago

Hey @ruckerzerg , thank you for reporting the issue. We'll look into it and get back to you soon!

ruckerzerg commented 1 month ago

A workaround is to manually push the new route, but this is not very convenient...

  const router = useRouter()

  return (
    <Link href="/hello/world">
      <Button
        size="md"
        variant="solid"
        action="primary"
        onPress={e => {
          e.preventDefault()
          router.push(href)
        }}
      >
        <ButtonText>Hello World!</ButtonText>
      </Button>
    </Link>
  )

The best solution would be to have an optional CSS only Button. Then one could also use server components instead of relying on use client.

sra1kumar-NULL commented 3 weeks ago

hey @ruckerzerg @philippbosch @RobertSasak , you should be wraping link with the button ( swap parent with children) , then it will not break in the client side ie..,

       <Button size="md" variant="solid" action="primary">
            <Link href="/about">Go to about client ▶</Link>
        </Button>

Closing this issue for now. Please feel free to open this issue again if had queries in this same context.