0

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

我尝试遵循本指南，以及一些突出显示的作品，而另一些则没有。

我当前的代码：

自定义链接.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" 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>
    </>
  );
}

我的问题：

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

如果我单击右侧的链接（“联系人”）或徽标上的链接，则不会清除当前活动的类，例如“出版物”，并且两者（以前活动的和当前选择的）都显示为突出显示。

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

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

我错过了什么？

4

1 回答 1

0

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

我正在添加（和样式）activeClassName“活动”。

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

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

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

于 2021-03-24T21:02:20.350 回答