Cách sử dụng Bộ định tuyến Next.js

Tìm hiểu cách sử dụng`next/router`gói để kiểm soát các tuyến đường trong Next.js

Trongliên kết hai trang trong Next.js bằng Liên kếtchúng ta đã biết cách sử dụng thành phần Liên kết để xử lý định tuyến một cách khai báo trong ứng dụng Next.js.

Thực sự tiện dụng để quản lý định tuyến trong JSX, nhưng đôi khi bạn cần kích hoạt thay đổi định tuyến theo chương trình.

Trong trường hợp này, bạn có thể truy cập trực tiếp vào Bộ định tuyến Next.js, được cung cấp trongnext/routergói và gọi nópush()phương pháp.

Dưới đây là một ví dụ về cách truy cập bộ định tuyến:

import { useRouter } from 'next/router'
export default () => {
const router = useRouter()
//…
}

Sau khi chúng tôi nhận được đối tượng bộ định tuyến bằng cách gọiuseRouter(), chúng ta có thể sử dụng các phương pháp của nó.

Đây là bộ định tuyến phía máy khách, vì vậy các phương pháp chỉ nên được sử dụng trong mã giao diện người dùng. Cách dễ nhất để đảm bảo điều này là gói các cuộc gọi tronguseEffect()React hook hoặc bên trongcomponendDidMount()trong các thành phần trạng thái React.

Những thứ bạn có thể sẽ sử dụng nhiều nhất làpush()vàprefetch().

push()cho phép chúng tôi kích hoạt thay đổi URL theo chương trình, trong giao diện người dùng:

router.push('/login')

prefetch()cho phép chúng tôi tìm nạp trước một URL theo chương trình, hữu ích khi chúng tôi không cóLinkthẻ tự động xử lý tìm nạp trước cho chúng tôi:

router.prefetch('/login')

Ví dụ đầy đủ:

import { useRouter } from 'next/router'
export default () => {
const router = useRouter()
useEffect(() => {
router.prefetch(’/login’)
})
}

Bạn cũng có thể sử dụng bộ định tuyến để nghesự kiện thay đổi tuyến đường.

Tải xuống miễn phí của tôiSổ tay Next.js

Cách sử dụng Bộ định tuyến Next.js

Tìm hiểu cách sử dụngnext/routergói để kiểm soát các tuyến đường trong Next.js

Thêm các bài hướng dẫn tiếp theo:

Tìm hiểu cách sử dụng`next/router`gói để kiểm soát các tuyến đường trong Next.js