NavBar as={Link} (next/link; next.js) doesn't collapses the NavBar.Collapse

[zurcacielos]

• [x] I have searched the Issues to see if this bug has already been reported
• [x] I have tested the latest version

Summary

When I do a import Link from "next/link"; <Navbar.Collapse > <Navbar.Link as={Link} active={pathname == "/privacy"} href="/privacy">

Privacy Policy

</Navbar.Link> </Navbar.Collapse >

I'm expecting the navbar to collapse. I use the Link from next/link because Next.js downloads those links in the background and do optimizations.

I also tried const [open, setOpen] = useState(false); <Navbar fluid menuOpen={open}> <Navbar.Link as={Link} onClick={() => setOpen(false)} active={pathname == "/privacy"} href="/privacy">

Privacy Policy

</Navbar.Link>

but it doesn't work.

Context

https://nextjs.org/docs/pages/api-reference/components/link

is a React component that extends the HTML element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.

Any help appreciated 🙌

[kamil-pociot]

Same applies to react-router-dom, would be great if isOpen state could be controlled manually

[tulup-conner]

Agreed, that intuitively makes sense and we can use the existing API by just closing the collapse whenever a link is clicked.

[zounar]

It is possible to control collapsing via useNavbarContext(). It's just a bit tricky though. 🙂

In my setup, I created a "root component" that returns the Navbar component:

import { Navbar } from 'flowbite-react';

function MyNavbarRoot(props: Props) {
  return (
    <Navbar>
      <MyNavbarInner {...props} />
    </Navbar>
  );
}

Then I created an "inner component", which can use useNavbarContext() provided by the Navbar component.

import { Navbar } from 'flowbite-react';
import {useNavbarContext} from "flowbite-react/lib/esm/components/Navbar/NavbarContext";

function MyNavbarInner(props: Props) {
  const { setIsOpen } = useNavbarContext();

  return (
    <>
        // Navbar content components, e.g. Navbar.Brand, Navbar.Toggle and Navbar.Collapse
    </>
  );
}

In this inner component, I can simply close the menu by adding onClick={() => setIsOpen(false)} onto each Navbar.Link components. This works fine even with Next/Link, e.g.:

import { Navbar } from 'flowbite-react';
import Link from 'next/link';

<Navbar.Link
  as={Link}
  href={"some href"}
  onClick={() => setIsOpen(false)}
>
  Look at that!
</Navbar.Link>

[JWPapi]

Hmm it helped, but after clicking a couple of times I get this error:

import { createContext, useContext } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module

Thanks for getting us this far. This is a shame.