reactjs - 路由在 Next.js 中处于活动状态时的目标活动链接

Question

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

标签： reactjsreact-routernext.js

Answer 1

基于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.