基于useRouter挂钩的简单解决方案:
import Link from "next/link";
import { useRouter } from "next/router";
export const MyNav = () => {
const router = useRouter();
return (
<ul>
<li className={router.pathname == "/" ? "active" : ""}>
<Link href="/">home</Link>
</li>
<li className={router.pathname == "/about" ? "active" : ""}>
<Link href="/about">about</Link>
</li>
</ul>
);
};
如果希望包含url查询参数，也可以使用router.asPath而不是router.pathname.如果想要处理锚定标记(如/#about)，这可能很有用.