如何解决Next.js 导航栏:单击来自不同 <nav> 组的链接时,突出显示不会清除
我正在尝试使用 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;
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>
</>
);
}
我的问题:
点击导航栏左侧的任何链接都可以正常工作,这意味着它会突出显示所选链接并清除前一个链接。 但是只有在“主页”、“出版物”和“链接”之间循环时,这才是正确的。
如果我点击徽标右侧的链接(“联系方式”)或,则不会清除当前的活动类别,例如“出版物”,并且两者(以前是活动和当前选定)显示为突出显示。
同样,如果我在“联系人”中,转到其他组的任何项目都不会清除其突出显示。
如果我刷新页面,链接将恢复为正确突出显示。
我错过了什么?
解决方法
我会将此添加为答案,希望它可以帮助解决此问题的其他人,并且我相信我知道导致问题的原因:
我正在添加(和样式化)activeClassName“active”。
顺便说一句,这与添加的 className Nav.Link (React-bootstrap) 相同。
所以实际上我的代码在添加和删除活动类名时工作正常,但它与 React-bootstrap 重复,我的自定义链接只删除其中一个,而不是 Bootstrap 一个。
我的解决方案是使用不同的 activeClassName(例如“is-active”),现在一切正常。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。