Định tuyến trong Next.js

Tram Ho

Next.js có một trong những tuyến đường mạnh mẽ và dễ sử dụng nhất mà bạn có thể sử dụng ngay khi mở hộp. Bạn không cần phải phức tạp bằng cách cấu hình nó. Vì Next.js tuân theo triết lý Convention over Configuration , mọi tệp bên trong thư mục pages sẽ được tự động coi là một tuyến. Vì vậy, hãy xem chúng ta nhận được những kiểu định tuyến nào với Next.

định tuyến tĩnh

Hãy tạo trang About cho ứng dụng blog của chúng tôi

Đối với nó, chỉ cần tạo một tệp tin about.js insided pages thư mục

với nội dung

Đó là nó. HMR được xây dựng của Next sẽ tự động chọn tệp được thêm vào và tạo một tuyến đường cho nó.

Chỉ cần truy cập localhost:3000/about và bạn sẽ thấy trang giới thiệu của mình.

Bây giờ, hãy nghĩ vì lý do nào đó mà bạn cần phải cấu trúc các tuyến đường giới about của mình theo một cách khác có thể

Để làm được điều đó, bạn cần thư mục của mình có cấu trúc như thế này

Hãy tạo chúng

Chúng tôi đã đổi tên tệp about.js cũ của about.js thành index.js và di chuyển nó vào bên trong thư mục pages/about . Nếu bạn làm mới trang, nó sẽ hoạt động theo cách tương tự.

và trang ngẫu nhiên kỳ lạ của bạn

Định tuyến động

Tất nhiên, bạn chỉ có thể sử dụng Static routes cho một số url đơn giản. Hãy nghĩ rằng bạn đang tạo một blog và bạn cần hiển thị bài viết của mình thông qua các posts/1 url

Cấu trúc thư mục cho điều đó sẽ là

index.js dành cho trang all posts của bạn.

Còn về tệp [id].js kỳ lạ thì sao? Đây là một cú pháp đặc biệt được Next.js sử dụng được gọi là slugs. Chuỗi bên trong dấu ngoặc [] biểu thị thông số mà trang sẽ nhận. Hãy xem mã

Chúng ta cần nhập mô-đun useRouter từ next/router để bắt tham số nào đã được gửi trong URL. Điều đó được thực hiện bởi đoạn mã sau

nếu thay vào đó bạn đặt tên cho slug của mình là [post_id].js , thì mã phải là

Bây giờ, nếu bạn truy cập các posts/1234567 url posts/1234567 , trang sẽ nhận được dữ liệu { "id": "1234567" } và hiển thị

Bắt tất cả các tuyến đường

Vì vậy, còn khi bạn muốn chuyển thêm dữ liệu qua url và bắt chúng trong trang sau.

trong trường hợp đó, chúng tôi sẽ cần Catch all routes . Cú pháp của nó giống như

Điều này sẽ khớp với các posts/1 , đồng thời khớp với các posts/1/2/3/abc , v.v. Hãy nhớ rằng với [id].js chúng tôi đã nhận được vlaue như { "id": "1234567" }

Với [… slug.js] chúng ta sẽ nhận giá trị trong một mảng. Vì vậy, các posts/a/b sẽ cung cấp cho bạn { "slug": ["a", "b"] }

Nếu bạn truy cập localhost:3000/articles/12/32 nó sẽ nhận được một mảng [12, 32]

Đó là nó.

Định tuyến nông

Định tuyến nông được sử dụng để thay đổi url mà không cần tìm nạp bất kỳ dữ liệu nào. Điều này có nghĩa là getStaticProps hoặc getServerSideProps sẽ không được gọi.

Thí dụ:

URL sẽ được cập nhật thành /?counter=123 và trang sẽ không bị thay thế, chỉ trạng thái của tuyến được thay đổi.

Tài liệu học tập

Tài liệu Next.js

Định tuyến tĩnh và động với Next.js

Mã nguồn

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo