Liên kết các trang
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 7 trên 47.
Hai trang mà không ai truy cập được vẫn chưa tạo thành một trang web. Bạn cần các liên kết, và Next.js có cách riêng:
import Link from 'next/link';
export default function Home() {
return (
<nav>
<Link href="/about">About</Link>
</nav>
);
}Nó trông giống một thẻ <a>, và trong HTML hoàn chỉnh, nó đúng là một thẻ như vậy: có cùng href, có thể nhấp chuột phải, trình đọc màn hình và công cụ tìm kiếm có thể đọc được. Vậy tại sao không viết luôn <a href="/about">?
Vì trình duyệt sẽ bỏ trang hiện tại và tải một trang hoàn toàn mới khi bạn dùng liên kết thông thường. Mọi script đều được tải xuống lại, React khởi động từ đầu và mọi thứ trong bộ nhớ đều biến mất: menu đang mở, biểu mẫu điền dở và các mặt hàng trong giỏ hàng.
Link chặn thao tác nhấp và chỉ thay thế phần màn hình thực sự khác biệt. Ứng dụng không bao giờ khởi động lại, vì vậy trạng thái được giữ nguyên và trang mới xuất hiện ngay lập tức.
<a href>: tải lại toàn bộ, ứng dụng khởi động lại, trạng thái bị mất<Link href>: cùng URL, vẫn là thẻ<a>trong HTML, không tải lại
Quy tắc rất đơn giản: bên trong ứng dụng, luôn dùng Link. Chỉ dùng <a> cho các liên kết rời khỏi trang web của bạn.
Thử thách
DễHai trang đã tồn tại nhưng chưa có cách nào để chuyển qua lại giữa chúng. Hãy kết nối chúng bằng Link.
- Trong cả hai tệp, hãy nhập
Linktừnext/link. - Trong
app/page.jsx, thêm liên kết đến/aboutvớiid="to-about". - Trong
app/about/page.jsx, thêm liên kết quay lại/vớiid="to-home".
Bạn có thể tự chọn nội dung liên kết. Các bài kiểm tra sẽ nhấp vào từng liên kết và kiểm tra xem bạn đã đến đúng trang chưa.
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