当 Next.js 中的路由处于活动状态时定位活动链接

如何像我们在 React-Router-4 中那样定位 Next.js 中的活动链接？ 意思是，当活动链路的路由处于活动状态时，为活动链路指定一个类别？

一个简单的解决方案基于useRouter hook:

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>
  );
};

你也可以使用router.asPath代替router.pathname如果你想包含 url 查询参数。如果您想处理锚标记，例如/#about.