Tuyến đường độ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 8 trên 47.
Một thực đơn có bốn mươi món không cần đến bốn mươi thư mục. Bạn muốn /menu/pizza, /menu/pasta và /menu/tiramisu là cùng một trang hiển thị dữ liệu khác nhau.
Đó là ý nghĩa của dấu ngoặc vuông trong tên thư mục:
app/
menu/
[slug]/
page.jsx -> /menu/pizza
-> /menu/pasta
-> /menu/anything-at-allThư mục thông thường khớp với tên của chính nó. Thư mục [bracketed] khớp với bất kỳ phân đoạn nào và ghi nhớ phần đã khớp. Từ bên trong dấu ngoặc là tên bạn sẽ dùng để đọc lại giá trị đó: [slug] cho bạn slug, [id] cho bạn id.
Tiếp theo, truyền giá trị đó vào trang dưới dạng một prop có tên là params:
// app/menu/[slug]/page.jsx
export default async function Dish({ params }) {
const { slug } = await params;
return <h1>{slug}</h1>;
}Có ba việc xảy ra trong tệp nhỏ đó:
- Trang nhận một prop
params. Mỗi trang đều có một prop, và với tuyến đường động, prop này chứa các phân đoạn khớp. - Trong Next 15,
paramslà một Promise, nên bạnawaitnó. Vì vậy thành phần này làasync. Chương 5 giải thích vì sao các trang được phép là như vậy. - Phép phân rã lấy ra
slug, tên này bắt nguồn trực tiếp từ thư mục[slug].
Truy cập /menu/pasta và slug là "pasta". Một tệp, mọi món ăn.
Thử thách
DễThư mục động đã có sẵn: app/menu/[slug]/page.jsx xử lý mọi URL bên dưới /menu. Vấn đề là trang luôn hiển thị pizza, bất kể bạn yêu cầu món nào.
- Đặt component thành
async. - Đọc phân đoạn khớp với
const { slug } = await params;. - Hiển thị
slugbên trong<h1 id="dish">thay cho văn bản cố định.
Các bài kiểm tra truy cập hai món ăn khác nhau và mong đợi hai tiêu đề khác nhau.
Tự làm thử
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{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ướng2Định tuyến và liên kết
Thư mục tạo thành tuyến đườngTuyến đường lồng nhauLiên kết các trangTuyến đường độngTrang không tìm thấyÔn tập: định tuyến