如何使用Next.js路由器

了解如何使用next/router包以控制Next.js中的路由

使用鏈接在Next.js中鏈接兩個頁面我們看到瞭如何使用Link組件以聲明方式處理Next.js應用程序中的路由。

在JSX中管理路由確實非常方便,但是有時您需要以編程方式觸發路由更改。

在這種情況下,您可以直接訪問Next.js路由器(在next/router打包,然後調用它push()方法。

這是訪問路由器的示例:

import { useRouter } from 'next/router'

export default () => { const router = useRouter() //… }

一旦通過調用獲得路由器對象useRouter(),我們可以使用它的方法。

這是客戶端路由器,因此方法僅應在面向前端的代碼中使用。確保這一點的最簡單方法是將調用包裝在useEffect()反應鉤子或內部componendDidMount()在React有狀態組件中。

您最常使用的是push()prefetch()

push()允許我們在前端以編程方式觸發URL更改:

router.push('/login')

prefetch()允許我們以編程方式預取網址,當我們沒有網址時就很有用Link標籤會自動為我們處理預取:

router.prefetch('/login')

完整示例:

import { useRouter } from 'next/router'

export default () => { const router = useRouter()

useEffect(() => { router.prefetch(’/login’) }) }

您也可以使用路由器收聽路線變更事件

免費下載我的Next.js手冊


接下來的更多教程: