当前链接
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 34 课，共 47 课。
每个带导航栏的网站都会突出显示你当前所在的链接。要做到这一点，组件必须知道服务器事后无法告知它的一件事：当前屏幕上显示的是哪个 URL。
next/navigation 会把它提供给你：
'use client';
import { usePathname } from 'next/navigation';
export default function Nav() {
const pathname = usePathname();
// 在 /about 页面上，pathname 是字符串 '/about'
}它是一个 hook，所以你已经了解的规则同样适用：它只能在文件以 'use client' 开头的组件中使用。这就是导航栏通常会成为服务器渲染应用中少数几个客户端组件之一的原因：每次路由变化时，它都必须重新运行。
接下来就是一个简单的比较：
<Link
href="/menu"
className={pathname === '/menu' ? 'nav-link active' : 'nav-link'}
>
Menu
</Link>注意导航栏的位置：它在 布局中。它只渲染一次，并且在每次导航时都会保留，因此重新渲染它的是 pathname 的变化，而不是重新挂载。
挑战
简单导航栏可以正常使用，但看不出你当前在哪个页面。请在 components/Nav.jsx 中修复这个问题。
- 调用
usePathname()，并将其存储在pathname中。 - 当链接的
href与pathname匹配时，为每个链接设置"nav-link active"这个 className；否则设置普通的"nav-link"。
Home 链接指向 /，Menu 链接指向 /menu。
亲手试试
import './globals.css';
import Nav from '../components/Nav.jsx';
export const metadata = {
title: 'Coddy Eats',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Nav />
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
