当前位置：首页 > news >正文

Next.js第四章(路由导航)

news 2025/11/13 7:20:49

路由导航

路由导航是指我们在Next.js中跳转页面的方式，例如原始的<a>标签，等。

在Next.js中，共有四种方式提供跳转:

Link组件
useRouter Hook (客户端组件)
redirect函数 (服务端组件)
History API (浏览器API 本文略过用的不多 了解即可)

Link组件

<Link>是一个内置组件，在a标签的基础上扩展了功能，并且还能用来实现预获取(prefetching)，以及保持滚动位置(scroll)等。

基本用法

import Link from "next/link" //引入Link组件
export default function Home() {return (<div><Link href="/about">跳转About页面</Link><Link href={{pathname: "/about", query: {name: "张三"}}}>跳转About并且传入参数</Link><Link href="/page" prefetch={true}>预获取page页面</Link><Link href="/xm" scroll={true}>保持滚动位置</Link><Link href="/daman" replace={true}>替换当前页面</Link></div>)
}

支持动态渲染

import Link from "next/link"
export default function Page() {const arr = [1, 2, 3, 4, 5]return arr.map((item) => (<Link key={item} href={`/page/${item}`}>动态渲染的Link</Link>))
}

useRouter Hook

useRouter 可以在代码中根据逻辑跳转页面，例如根据用户权限跳转不同的页面。

使用该hook需要在客户端组件中。需要在顶层编写 'use client' 声明这是客户端组件。

'use client'
import { useRouter } from "next/navigation"
export default function Page() {const router = useRouter()return (<><button onClick={() => router.push("/page")}>跳转page页面</button><button onClick={() => router.replace("/page")}>替换当前页面</button><button onClick={() => router.back()}>返回上一页</button><button onClick={() => router.forward()}>跳转下一页</button><button onClick={() => router.refresh()}>刷新当前页面</button><button onClick={() => router.prefetch("/about")}>预获取about页面</button></>)
}

redirect 函数

redirect 函数可以用于服务端组件/客户端组件中跳转页面，例如根据用户权限跳转不同的页面。

在Next.js中 redirect的状态是：307临时重定向

import { redirect } from "next/navigation"
export default async function Page() {const checkLogin = await checkLogin()//如果用户未登录，则跳转到登录页面if (!checkLogin) {redirect("/login")}return (<div><h1>Page</h1></div>)
}

permanentRedirect 函数

permanentRedirect 跟上面的redirect的区别是：permanentRedirect是永久重定向，而redirect是临时重定向。

在Next.js中 permanentRedirect的状态是：308永久重定向

//用法跟redirect一样，只是状态码不同
import { permanentRedirect } from "next/navigation"
export default async function Page() {const checkLogin = await checkLogin()if (!checkLogin) {permanentRedirect("/login")}
}