Điều hướng dùng chung
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 12 trên 47.
Thanh điều hướng là nội dung thường có trong bố cục: chỉ viết một lần, xuất hiện trên mọi đường dẫn và không bao giờ được gắn kết lại.
// app/layout.jsx
import Link from 'next/link';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<nav>
<Link href="/">Home</Link>
</nav>
{children}
</body>
</html>
);
}Hãy chú ý vị trí của {children}: sau phần điều hướng. Mọi thứ bạn đặt trước nó sẽ xuất hiện phía trên trang, còn mọi thứ đặt sau nó sẽ xuất hiện phía dưới. Bố cục chỉ là JSX. Quy tắc duy nhất là phải có {children} ở đâu đó bên trong.
Giờ đây, bố cục là tệp của bạn, không còn bị khóa nữa. Thêm thanh điều hướng, rồi xem nó vẫn giữ nguyên vị trí khi nội dung trang bên dưới thay đổi.
Thử thách
DễThêm thanh điều hướng cho Coddy Eats, thanh này xuất hiện trên mọi trang.
Trong app/layout.jsx, bên trong <body> và phía trên {children}, hãy thêm:
- Một
<nav>cóid="nav" - Bên trong, một
<Link>trỏ đến/, cóid="home-link"và văn bảnHome - Và một
<Link>trỏ đến/menu, cóid="menu-link"và văn bảnMenu
Các trang đã bị khóa, bạn chỉ chỉnh sửa layout. Sau đó, các bài kiểm tra sẽ truy cập /menu và kiểm tra xem thanh điều hướng vẫn hiển thị trên màn hình hay không.
Tự làm thử
import './globals.css';
import Link from 'next/link';
export const metadata = {
title: 'Coddy Eats',
};
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
3Bố cục và siêu dữ liệu
Bố cục gốcĐiều hướng dùng chungBố cục lồng nhauSiêu dữ liệu trangSiêu dữ liệu độngÔn tập: bố cục