Next.js 中的活动导航链接

在 Next.js 中，我们可以使用 Active Navigation Links（活动导航链接）来高亮当前用户所在页面的导航栏链接。这可以提高用户的体验，让用户在导航栏中实时知道自己所在的页面。

使用方法

在 Next.js 中实现活动导航链接非常容易。我们只需要在导航栏链接上加上 active 类名，然后使用 CSS 样式表来实现高亮样式即可。

例如，假设我们有一个 Header 组件用来呈现网站的导航栏，并且我们有三个页面：Home、About 和 Contact。我们可以在组件中添加类似如下的代码：

import { useRouter } from 'next/router';

function Header() {
  const router = useRouter();

  return (
    <nav>
      <ul>
        <li>
          <a className={router.pathname === '/' ? 'active' : ''} href="/">
            Home
          </a>
        </li>
        <li>
          <a className={router.pathname === '/about' ? 'active' : ''} href="/about">
            About
          </a>
        </li>
        <li>
          <a className={router.pathname === '/contact' ? 'active' : ''} href="/contact">
            Contact
          </a>
        </li>
      </ul>
    </nav>
  );
}

在这个例子中，我们使用了 useRouter 钩子来获取当前页面的路径。然后在每个导航栏链接中，我们检查当前路径是否与链接的路径匹配，如果是，则给链接添加 active 类名，否则不添加。

添加高亮样式

当链接被选中时，我们需要为它添加高亮样式。这可以通过 CSS 样式表来实现。下面是一个简单的样式表，可以将背景颜色设置为蓝色：

nav a.active {
  background-color: blue;
  color: white;
}

记得将样式表添加到你的页面中。

结论

通过使用 Active Navigation Links（活动导航链接），我们可以提高用户的体验，让用户在导航栏中实时知道自己所在的页面。在 Next.js 中实现活动导航链接非常容易，只需要在导航栏链接上加上 active 类名，然后使用 CSS 样式表来实现高亮样式即可。