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

本文介绍了路由在 Next.js 中处于活动状态时的目标活动链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

How to target the active Link in Next.js like they way we do it in React-Router-4?Meaning, give the active link a class when its route is active?

推荐答案

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

A simple solution based on the 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>
  );
};

这篇关于路由在 Next.js 中处于活动状态时的目标活动链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！