Next.js 导航栏：单击来自不同 <nav> 组的链接时突出​​显示不清晰

Posted 2023-02-22

【中文标题】Next.js 导航栏：单击来自不同 <nav> 组的链接时突出​​显示不清晰

【英文标题】：Next.js navbar: highlighting doesn't clear when clicking on link from different <nav> group

【发布时间】：2021-06-21 03:41:15

【问题描述】：

我正在尝试使用 Next.js 突出显示活动链接的导航栏（我也在使用 React-bootstrap，作为记录）。

我尝试遵循this 指南，并且一些突出显示有效，而另一些则没有。

我当前的代码：

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;

导航.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"  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>
    </>
  );

我的问题：

单击导航栏左侧的任何链接都可以正常工作，这意味着它会突出显示选定的链接并清除前一个链接。 但是只有在“主页”、“出版物”和“链接”之间循环时才会如此。

如果我点击右侧的链接（“联系方式”）或在徽标上，当前活动的类别，例如“出版物”并没有被清除，并且两者（以前活动和当前选定）显示为突出显示。

同样，如果我在“联系”上，转到其他组的任何项目都不会清除其突出显示。

如果我刷新页面，链接将恢复为正确突出显示。

我错过了什么？

【问题讨论】：

点击“联系人”是否会导致CustomLinks 在另一个组中重新呈现？

不，没有链接会导致重新渲染。他们在这方面工作得很好。

这可能是突出显示不更新的原因。

不，不。我想我明白了。我将添加我的解决方案作为答案。

【参考方案1】：

我会将其添加为答案，希望它可能对解决此问题的其他人有所帮助，并且我相信我知道导致该问题的原因：

我正在添加（和样式化）activeClassName“active”。

顺便说一句，这与 Nav.Link (React-bootstrap) 添加的 className 相同。

所以实际上我的代码在添加和删除活动类名时工作正常，但它与 React-bootstrap 重复，我的自定义链接只是删除其中一个，而不是 Bootstrap 的。

我的解决方案是使用不同的 activeClassName（例如“is-active”），现在一切正常。