Proper way to use next/link with flowbite-react

[upview]

Hey guys,
Congratulations on the library, it's just awesome. I was wondering for the recommended way to implement next/link with flowbite-react, for components like the Navbar. Documentation here provides the following example:
<Navbar.Link href="/navbars" active={true} > Home </Navbar.Link>
I think that's not implementing the next/link, causing the navbar to re-render while navigating the app. Can you advise me on the proper approach?
Thanks!

[lgtmrobo]

Any update here?

[tulup-conner]

We haven't got this feature on every component, but you can cast many components to any generic component and pass its props.

For example, see https://github.com/themesberg/flowbite-react/blob/main/src/components/Sidebar/SidebarItem.tsx#L83. You can implement this as

import Link from "next/link";

<Sidebar.Item as={Link} href="/" prefetch={false}>Next.js Link</Sidebar.Item>

If you find a component that should have this but you can't, please do create an issue and we'll fix that up.

[VladBrok]

this is very helped me, thank you!

[idc77]

But, react-router-dom for instance the doesn't have a href attribute, but a to attribute.

[flyingduck92]

I am looking for this for days. This thing should be on the official docs

[showaltb]

I'm very much a beginner with all of this, but I was able to get this working with react-router-dom by wrapping the <Sidebar.Item> in a <Link> and casting the <Sidebar.Item> as a div to avoid browser warning about nesting <a> within <a>.

<Link to="/dashboard">
   <Sidebar.Item as="div">Dashboard</Sidebar.Item>
</Link>