路由导航
路由导航是指我们在Next.js中跳转页面的方式，例如原始的
<a>标签，等。在Next.js中，共有四种方式提供跳转:
Link组件
useRouterHook (客户端组件)
redirect函数 (服务端组件)
History API(浏览器API 本文略过用的不多 了解即可)
Link组件
<Link>是一个内置组件，在a标签的基础上扩展了功能，并且还能用来实现预获取(prefetch)，以及保持滚动位置(scroll)等。基本用法
使用了 useSearchParams() 钩子，需要用 Suspense 边界包裹它。
prefetch={false} 预获取能力，默认是开启
scroll={true}>保持滚动位置，false为保持滚动位置，默认是true保持在顶端
replace={true} 默认：新页面加入历史记录（可以回退），现在：替换当前页面（不能回退到原页面）
支持动态渲染
useRouter Hook
useRouter 可以在代码中根据逻辑跳转页面，例如根据用户权限跳转不同的页面。
使用该hook需要在客户端组件中。需要在顶层编写
'use client' 声明这是客户端组件。redirect 函数
redirect 函数可以用于服务端组件/客户端组件中跳转页面，例如根据用户权限跳转不同的页面。
在Next.js中 redirect的状态是：307临时重定向
permanentRedirect 函数
permanentRedirect 跟上面的redirect的区别是：permanentRedirect是永久重定向，而redirect是临时重定向。
在Next.js中 permanentRedirect的状态是：308永久重定向
permanentRedirect / redirect 参数说明
这两个函数都接受以下参数：
path：字符串类型，表示重定向的目标 URL（支持相对路径和绝对路径）
type：可选参数，值为replace或push，用于控制重定向的行为
关于
type 参数的默认行为：- 在 Server Actions 中：默认使用
push，会将新页面添加到浏览器历史记录
- 在 其他场景 中：默认使用
replace，会替换当前的浏览器历史记录
你可以通过显式指定
type 参数来覆盖默认行为。⚠️ 注意：type 参数在服务端组件中无效，仅在客户端组件和 Server Actions 中生效。
预计学习时间: 5 分钟
难度级别: 初级 🟢
📎 参考文章
欢迎您在底部评论区留言，一起交流~
Loading...