Ôn tập: Điều hướ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 38 trên 47.
Thử thách
Trung bìnhTóm tắt chương: một ứng dụng nhỏ, cả hai chiều của URL: thanh điều hướng đọc vị trí hiện tại, còn trang thực đơn lọc món ăn theo chuỗi truy vấn.
- Trong
components/Nav.jsx, gọiusePathname()và gán cho mỗi liên kết className"nav-link active"khihrefkhớp với đường dẫn hiện tại, và"nav-link"thông thường trong trường hợp còn lại. Home là/, Menu là/menu. - Trong
app/menu/page.jsx, đọccategorytừsearchParams(hãy nhớ đây là một promise) và chỉ hiển thị các món ăn khớp, hoặc hiển thị tất cả khi không có category.
/menu?category=pizza sẽ hiển thị 2 trong số 4 món ăn, đồng thời làm nổi bật liên kết 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ấ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