Liên kết đang hoạt động
Thuộc phần Kiến thức thiết yếu về Next.js trong hành trình React của Coddy. Bài học 34 trên 47.
Mọi trang web có thanh điều hướng đều làm nổi bật liên kết tương ứng với trang bạn đang xem. Để làm vậy, một component cần biết điều mà máy chủ không thể xác định sau đó: URL nào đang hiển thị trên màn hình.
next/navigation cung cấp cho bạn:
'use client';
import { usePathname } from 'next/navigation';
export default function Nav() {
const pathname = usePathname();
// Ở /about, pathname là chuỗi '/about'
}Đây là một hook, nên các quy tắc bạn đã biết vẫn áp dụng: hook chỉ hoạt động trong thành phần có tệp bắt đầu bằng 'use client'. Đó là lý do thanh điều hướng thường là một trong số ít thành phần phía máy khách trong ứng dụng được kết xuất phía máy chủ: nó phải chạy lại mỗi khi tuyến đường thay đổi.
Từ đó, đây là phép so sánh đơn giản:
<Link
href="/menu"
className={pathname === '/menu' ? 'nav-link active' : 'nav-link'}
>
Menu
</Link>Lưu ý vị trí của thanh điều hướng: trong bố cục. Thanh này chỉ hiển thị một lần và vẫn tồn tại qua mỗi lần điều hướng, vì vậy việc pathname thay đổi sẽ khiến nó hiển thị lại, chứ không phải được gắn lại.
Thử thách
DễThanh điều hướng hoạt động, nhưng không có gì cho biết bạn đang ở trang nào. Sửa điều đó trong components/Nav.jsx.
- Gọi
usePathname()và lưu kết quả vàopathname. - Gán cho mỗi liên kết className
"nav-link active"khihrefkhớp vớipathname, và"nav-link"nếu không khớp.
Liên kết Home trỏ đến /, còn liên kết Menu trỏ đến /menu.
Tự làm thử
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>
);
}
Tự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Kiến thức thiết yếu về Next.js
4Máy chủ và client
Hai loại thành phầnĐọc lỗiDòng 'use client'Giữ phần client nhỏ gọnMáy chủ bên trong clientTóm tắt: máy chủ và client7Điều hướng phía máy khách
Liên kết đang hoạt độngĐiều hướng bằng codeLọc bằng URLBộ xử lý tuyến đườngÔn tập: Điều hướng