了解如何使用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手冊
接下來的更多教程:
- Next.js入門
- Next.js vs Gatsby vs create-react-app
- 如何安裝Next.js
- 使用鏈接在Next.js中鏈接兩個頁面
- 路由器中Next.js中的動態內容
- 使用getInitialProps將數據饋送到Next.js組件
- 使用CSS樣式化Next.js組件
- 在Next.js中預取內容
- 使用路由器檢測Next.js中的活動鏈接
- 查看源代碼以確認SSR在Next.js中正常工作
- Next.js:使用自定義標籤填充head標籤
- 立即部署Next.js應用程序
- Next.js:僅在Next.js的服務器端或客戶端運行代碼
- 在生產中部署Next.js應用
- 如何分析Next.js應用程序捆綁包
- Next.js中的延遲加載模塊
- 向您的Next.js應用添加包裝器組件
- Next.js添加到您的應用程序中的圖標
- Next.js應用程序捆綁包
- 如何使用Next.js路由器
- 如何使用Next.js API路由
- 如何在Next.js應用中在服務器端獲取Cookie
- 如何更改Next.js應用程序端口