Tuyến đường lồng nhau
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 6 trên 47.
Giờ hãy làm thử. Để thêm một trang vào ứng dụng Next.js, bạn cần thực hiện hai bước: tạo một thư mục, đặt một tệp page.jsx vào đó.
// app/about/page.jsx -> /about
export default function About() {
return <h1>About us</h1>;
}Đó là toàn bộ tệp. Bạn không cần cập nhật bảng định tuyến, không cần import ở nơi nào khác, cũng không cần khởi động lại. Thành phần này là React thông thường. Điều duy nhất biến nó thành URL là vị trí bạn lưu tệp.
Có hai điểm bạn cần ghi nhớ:
- Đây phải là một export mặc định: nhờ vậy, Next.js có thể lấy component trang từ tệp.
- Bạn tự đặt tên cho component.
About,AboutPage,Whatever: URL được xác định bởi thư mục, không phải bởi hàm.
Bạn cũng muốn có /about/team chứ? Hãy tạo app/about/team/ rồi thêm một page.jsx nữa vào đó. Quy tắc này vẫn giữ nguyên khi trang web phát triển, đó chính là điểm mấu chốt.
Thử thách
Người mớiỨng dụng có trang chủ. Hãy tạo thêm trang giới thiệu.
- Hoàn thiện tệp
app/about/page.jsx. - Xuất mặc định một component từ tệp này.
- Component phải trả về một
<h1>cóid="about-title"và nội dung chính xác làAbout us.
Giữ nguyên app/page.jsx: các bài kiểm tra sẽ truy cập cả hai URL.
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