Trang không tìm thấy
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 9 trên 47.
Một tuyến đường động quá rộng rãi đến mức thành ra có vấn đề. app/menu/[slug]/page.jsx khớp với /menu/pizza, và cũng khớp với /menu/asdfgh dễ dàng như vậy, rồi hiển thị trang món ăn cho một món không tồn tại.
Next.js cung cấp cho bạn cả hai phần của giải pháp.
1. Màn hình 404. Một tệp có tên not-found.jsx, thuộc cùng nhóm tên tệp đặc biệt với page.jsx và layout.jsx:
// app/not-found.jsx
export default function NotFound() {
return <h1>We don't have that</h1>;
}Đặt tệp này tại app/not-found.jsx, và nó sẽ áp dụng cho toàn bộ ứng dụng: mọi URL không khớp với trang nào sẽ hiển thị trang này thay vì trang 404 mặc định.
2. Trường hợp kích hoạt. Đôi khi URL khớp với một tuyến đường nhưng dữ liệu lại không tồn tại. Đó là trường hợp /menu/asdfgh, và chỉ code của bạn mới có thể xác định điều đó. Gọi notFound():
import { notFound } from 'next/navigation';
const dishes = ['pizza', 'pasta'];
export default async function Dish({ params }) {
const { slug } = await params;
if (!dishes.includes(slug)) {
notFound();
}
return <h1>{slug}</h1>;
}notFound() không trả về giá trị và bạn cũng không trả về nó: gọi hàm này sẽ dừng trang ngay tại đó và hiển thị tệp not-found.jsx gần nhất. Mọi thứ sau if đều có thể mặc định rằng món ăn là có thật, đó là lý do câu lệnh kiểm tra được đặt ở đầu.
Thử thách
Trung bình/menu/sushi hiện hiển thị trang món ăn cho một món không có trong thực đơn. Hãy khắc phục lỗ hổng này.
- Hoàn thiện tệp
app/not-found.jsx. Xuất mặc định một thành phần trả về<h1>cóid="not-found-title"và nội dung chính xác làDish not found. - Trong
app/menu/[slug]/page.jsx, nhậpnotFoundtừnext/navigation. - Nếu
slugkhông có trong mảngdishes, hãy gọinotFound()trước khi hiển thị bất cứ thứ gì.
/menu/pizza vẫn phải hoạt động.
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