Next-4-路由导航
客户端路由导航方式
Link 组件
通过Next.js提供的<Link>组件实现页面跳转，避免整页刷新，提升用户体验。需从next/link导入，例如：
importLinkfrom"next/link";exportdefaultfunctionHomePage(){return(<div><Link href="/home/kun"className="cursor-pointer text-blue-500">跳转kun</Link><br/><Link href={{pathname:"/home/me",query:{name:["kun",'kun2']}}}className="cursor-pointer text-red-500">跳转me,并携带参数</Link><br/><Link href={{pathname:"/home/me",}}prefetch={true}className="cursor-pointer text-red-500">预获取页面</Link><br/><Link href={{pathname:"/home/me"}}scroll={true}className="cursor-pointer text-blue-500">保持当前滚动位置</Link><br/><Link href={{pathname:"/home/me"}}replace={true}className="cursor-pointer text-red-500">替换当前路由</Link></div>)}接收参数(useSearchParams )：
'use client'importLinkfrom"next/link";import{useSearchParams}from"next/navigation";exportdefaultfunctionMePage(){// 获取路由传递的参数constsearchParams=useSearchParams()constname=searchParams.get("name")constnames=searchParams.getAll("name")console.log('传递的参数：',name)console.log('传递的多个参数：',names)return(<div><h1>Me</h1><Link href="/home/kun">Kun</Link></div>)}useRouter Hook
useRouter 是 Next.js 提供的 React Hook，用于访问路由对象，实现客户端导航、获取路由参数、查询字符串等操作。需从 next/router 导入。
| 方法 | 作用 | 一行代码示例 |
|---|---|---|
push(url) | 新增一条历史记录并跳转 | router.push('/dashboard') |
replace(url) | 替换当前历史记录（不留“后退”） | router.replace('/login') |
back() | 等价于浏览器后退按钮 | router.back() |
forward() | 等价于浏览器前进按钮 | router.forward() |
refresh() | 重新请求当前页面数据（不闪屏） | router.refresh() |
prefetch(url) | 静默预拉取目标页面（提升切页速度） | router.prefetch('/detail') |
小栗子
<button onClick={()=>router.push({pathname:'/product/[id]',query:{id:100,ref:'tw'}})}>查看商品</button>路由预加载策略
自动预加载<Link>组件默认预加载视口内链接资源，通过prefetch={false}可禁用。
手动预加载
通过router.prefetch()主动预加载目标路由：
useEffect(()=>{router.prefetch('/settings');},[]);动态路由导航
模板字符串路径
动态路由参数可通过模板字符串传递：
router.push(`/posts/${postId}`);importLinkfrom"next/link"exportdefaultfunctionPage(){constarr=[1,2,3,4,5]returnarr.map((item)=>(<Link key={item}href={`/page/${item}`}>动态渲染的Link</Link>))}对象形式路径
支持传递pathname和query对象，适用于复杂参数：
router.push({pathname:'/search',query:{keyword:'nextjs'}});路由事件监听
通过router.events监听路由变化事件：
router.events.on('routeChangeStart', (url) => { console.log('路由开始变化:', url); });服务端路由导航
redirect函数
在服务端组件或Server Actions中使用（HTTP 307）：
import{redirect}from'next/navigation';redirect('/login');permanentRedirect
适用于永久重定向场景（HTTP 308）：
permanentRedirect('/new-url');