[HELP] Usage with next.js link in navbar?

[Brawl345]

I read #300 and vercel/next.js#7915 I still don't know if it's possible without errors to use Next.js link (https://nextjs.org/docs/api-reference/next/link) with Bulma. When I use it like this:

    <Navbar color="dark">
      <Navbar.Brand>
        <Link href="/" passHref>
          <Navbar.Item>
            Example
          </Navbar.Item>
        </Link>
        <Navbar.Burger />
      </Navbar.Brand>

      <Navbar.Menu>
        <Navbar.Container>
          <Link href="/" passHref>
            <Navbar.Item active={router.pathname === '/'}>
              Home
            </Navbar.Item>
          </Link>
        </Navbar.Container>
      </Navbar.Menu>
    </Navbar>

I get: Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

I also tried forwardRef like here: https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-function-component but it doesn't seem to work :/

Using renderAs is also not possible because it ends up as an unstyled anchor tag. I think this is something that has to be fixed on the Next.js side but they don't seem t be willing to fix it and it works with react-bootstrap... Do you have any idea? Thank you!

[couds]

Hi @Brawl345 Maybe you can try something like this

const CustomItem = React.forwardRef((props, ref) {
  return (
    <Navbar.Item {...props} domRef={ref }/>
  );
});

 <Navbar color="dark">
      <Navbar.Brand>
        <Link href="/" passHref>
          <CustomItem >
            Example
          </CustomItem >
        </Link>
        <Navbar.Burger />
      </Navbar.Brand>

      <Navbar.Menu>
        <Navbar.Container>
          <Link href="/" passHref>
            <CustomItem  active={router.pathname === '/'}>
              Home
            </CustomItem >
          </Link>
        </Navbar.Container>
      </Navbar.Menu>
    </Navbar>

I didn't test it but I think this should work.

Also do you know why the renderAs cause the anchor to lose the styling? in theory should work

[Brawl345]

Thank you very much :D!! That did the trick! You just forgot the => before the opening { for the CustomItem, so:

  const CustomItem = forwardRef((props, ref) => (
    <Navbar.Item {...props} domRef={ref} />
  ));

---

Also do you know why the renderAs cause the anchor to lose the styling? in theory should work

Good question... I tried this:

<Navbar.Item renderAs={Link} active={router.pathname === '/'} href="/">
  Home
</Navbar.Item>

and ended up with:

<div class="navbar-start"><a href="/">Home</a></div>

(note the missing navbar-item class).

[couds]

After reading the next documentation seems that next Link do not pass the className internally.

[faeb187]

looks like we're talking about the one and only difference: the .navbar-item class?

<Link href="/" className="navbar-item">done</Link>

@couds className does its job (I'm with version Next.js 13.6.1)