Next.js navbar: highlighting doesn't clear when clicking on link from different
group

Question

I'm trying to implement a navbar with active links highlighting with Next.js (I am using React-bootstrap, too, for the record).

I tried to follow this guide, and some highlighting works, while other doesn't.

My Current Code:

CustomLink.jsx:

import { useRouter } from 'next/router';
import Link from 'next/link';
import React, { Children } from 'react';

const CustomLink = ({ children, activeClassName, ...props }) => {
  const { asPath } = useRouter();
  const child = Children.only(children);
  const childClassName = child.props.className || '';

  const className =
    asPath === props.href || asPath === props.as
      ? `${childClassName} ${activeClassName}`.trim()
      : childClassName;

  return (
    <Link {...props} passHref>
      {React.cloneElement(child, {
        className: className || null,
      })}
    </Link>
  );
};

export default CustomLink;

Navigation.jsx:

import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import CustomLink from '../CustomLink/CustomLink';

export default function Navigation() {
  return (
    <>
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <CustomLink activeClassName="active" href="/">
          <img src="/logo.svg" alt="WhiteQueen Logo" height={50} />
        </CustomLink>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="mr-auto">
            <CustomLink activeClassName="active" href="/">
              <Nav.Link>Home</Nav.Link>
            </CustomLink>
            <CustomLink activeClassName="active" href="/publications">
              <Nav.Link>Publications</Nav.Link>
            </CustomLink>
            <CustomLink activeClassName="active" href="/links">
              <Nav.Link>Links</Nav.Link>
            </CustomLink>
          </Nav>
          <Nav>
            <CustomLink activeClassName="active" href="/contact">
              <Nav.Link>Contact</Nav.Link>
            </CustomLink>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </>
  );
}

My issue:

Clicking on any link on the left-side of the navbar works correctly, meaning it highlights the selected link and clears the previous one. But that's only true when cycling between "Home", "Publications" and "Links".

If I click on the link on the right hand side ("Contact") or on the logo, the current active class of, say, "Publications" isn't cleared and both (previously active and currently selected) show as highlighted.

Similarly, if I am on "Contact", going to any item of the other group doesn't clear its highlighting.

Links revert to highlighting correctly if I refresh the page.

What am I missing?

Does clicking on "Contact" cause a re-render of the `CustomLink`s on the other group? — juliomalves, Mar 24 '21 at 18:46
No, no link causes a re-render. They work fine in that respect. — Guillermo Brachetta, Mar 24 '21 at 19:40
No, no. I think I got what it is. I'll add my solution as an answer. — Guillermo Brachetta, Mar 24 '21 at 20:57

score 0 · Answer 1 · answered Mar 24 '21 at 21:02

I'll add this as an answer hoping it may be of help to others with this issue, and I believe I know what was producing the issue:

I was adding (and styling) the activeClassName "active".

Incidentally, that's the same className Nav.Link (React-bootstrap) adds.

So in fact my code was working correctly in adding and deleting the active classname, but it was duplicate with React-bootstrap's and my custom Link was only removing one of them, not the Bootstrap one.

My solution was to use a different activeClassName ("is-active", for example) and now it all works as it's supposed to.

Next.js navbar: highlighting doesn't clear when clicking on link from different group

1 Answers1

Next.js navbar: highlighting doesn't clear when clicking on link from different
group