Next-4-路由导航

客户端路由导航方式

Link 组件

通过Next.js提供的<Link>组件实现页面跳转，避免整页刷新，提升用户体验。需从next/link导入，例如：

ts 复制代码

import Link from "next/link";

export default function HomePage() {
  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 )：

ts 复制代码

'use client'
import Link from "next/link";
import { useSearchParams } from "next/navigation";

export default function MePage() {

  // 获取路由传递的参数
  const searchParams = useSearchParams()
  const name = searchParams.get("name")
  const names = 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')`

小栗子

ts 复制代码

<button
  onClick={() =>
    router.push({
      pathname: '/product/[id]',
      query: { id: 100, ref: 'tw' }
    })
  }
>
  查看商品
</button>

路由预加载策略

自动预加载
<Link>组件默认预加载视口内链接资源，通过prefetch={false}可禁用。

手动预加载

通过router.prefetch()主动预加载目标路由：

ts 复制代码

useEffect(() => {
  router.prefetch('/settings');
}, []);

动态路由导航

模板字符串路径

动态路由参数可通过模板字符串传递：

ts 复制代码

router.push(`/posts/${postId}`);

ts 复制代码

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>
    ))
}

对象形式路径

支持传递pathname和query对象，适用于复杂参数：

ts 复制代码

router.push({
  pathname: '/search',
  query: { keyword: 'nextjs' }
});

路由事件监听

通过router.events监听路由变化事件：

jsx 复制代码

router.events.on('routeChangeStart', (url) => {
  console.log('路由开始变化:', url);
});

服务端路由导航

redirect函数

在服务端组件或Server Actions中使用（HTTP 307）：

ts 复制代码

import { redirect } from 'next/navigation';
redirect('/login');

permanentRedirect

适用于永久重定向场景（HTTP 308）：

ts 复制代码

permanentRedirect('/new-url');