如何使用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手冊