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
1 2 | touch pages/about.js |
với nội dung
1 2 3 4 5 6 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">About</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> About <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Đó 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ể
1 2 3 4 | localhost:3000/about -> Opens the about us localhost:3000/about/contact -> Opens the contact page localhost:3000/about/some_random_page -> Opens some random page you need to show |
Để 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
1 2 3 4 5 6 | > pages > about index.js contact.js some_random_page.js |
Hãy tạo chúng
1 2 3 4 | mkdir about mv pages/about.js pages/about/index.js |
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ự.
1 2 | touch pages/about/contact.js |
1 2 3 4 5 6 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Contact</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> Contact Us <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
và trang ngẫu nhiên kỳ lạ của bạn
1 2 | touch pages/about/some_random_page.js |
1 2 3 4 5 6 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">SomeRandomPage</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> bla bla bla <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Đị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à
1 2 3 4 5 | > pages > posts index.js [id].js |
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 [ và ] biểu thị thông số mà trang sẽ nhận. Hãy xem mã
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">import</span> <span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'next/router'</span> <span class="token keyword">const</span> <span class="token function-variable function">Post</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> id <span class="token punctuation">}</span> <span class="token operator">=</span> router <span class="token punctuation">.</span> query <span class="token keyword">return</span> <span class="token operator"><</span> p <span class="token operator">></span> Post <span class="token operator">:</span> <span class="token punctuation">{</span> id <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Post |
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
1 2 3 | <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> id <span class="token punctuation">}</span> <span class="token operator">=</span> router <span class="token punctuation">.</span> query <span class="token comment">// < { id } because we named the slug in filename as [id].js</span> |
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à
1 2 3 | <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> post_id <span class="token punctuation">}</span> <span class="token operator">=</span> router <span class="token punctuation">.</span> query |
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ư
1 2 3 4 5 | <span class="token operator">></span> pages <span class="token operator">></span> posts index <span class="token punctuation">.</span> js <span class="token punctuation">[</span> <span class="token operator">...</span> slug <span class="token punctuation">.</span> js <span class="token punctuation">]</span> |
Đ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"] }
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">import</span> <span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'next/router'</span> <span class="token keyword">const</span> <span class="token function-variable function">Article</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> slug <span class="token operator">=</span> router <span class="token punctuation">.</span> query console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> slug <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token operator"><</span> p <span class="token operator">></span> Article <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Article |
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ụ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import { useEffect } from 'react' import { useRouter } from 'next/router' // Current URL is '/' function Page() { const router = useRouter() useEffect(() => { // Always do navigations after the first render router.push('/?counter=123', undefined, { shallow: true }) }, []) useEffect(() => { // The counter changed! }, [router.query.counter]) } export default Page |
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.