Next.js 链接与导航详解

发表于

Next.js 链接与导航

在 Next.js 中，导航分为两大类：

  1. 声明式导航（通过 <Link> 组件）
  2. 命令式导航（通过 useRouter API）

1. 声明式导航

使用 next/link 实现页面跳转：

1
2
3
4
5
6
7
8
import Link from 'next/link';

// 普通跳转
<Link href="/blog">Blog</Link>

// 替换当前历史记录（不会新增 history 记录）
<Link href="/blog" replace>Blog</Link>

2. 获取当前路径

在客户端组件中，可以用 usePathname 获取当前路由路径：
1
2
3
4
5
6
7
8
'use client';

import { usePathname } from 'next/navigation';

export default function PathInfo() {
  const pathname = usePathname();
  return <p>当前路径：{pathname}</p>;
}

3. 参数（params）与搜索参数（searchParams）

在 Next.js 的 page.tsx 中，可以通过 props 获取路由参数和查询参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 服务端组件写法
export default async function Article({
  params,
  searchParams,
}: {
  params: Promise<{ articleId: string }>;
  searchParams: Promise<{ lang?: 'zh' | 'en' }>;
}) {
  const { articleId } = await params;
  const { lang = 'en' } = await searchParams;

  return <div>文章 ID: {articleId}，语言: {lang}</div>;
}

// 客户端组件写法
'use client';
import { use } from 'react';

export default function Article({
  params,
  searchParams,
}: {
  params: Promise<{ articleId: string }>;
  searchParams: Promise<{ lang?: 'zh' | 'en' }>;
}) {
  const { articleId } = use(params);
  const { lang = 'en' } = use(searchParams);

  return <div>文章 ID: {articleId}，语言: {lang}</div>;
}
参数说明
  • params
    动态路由参数，如 /articles/123 中的 articleId=123
  • searchParams
    查询参数，如 /articles/123?lang=zh 中的 lang=zh
  • 注意：
  • page.tsx 可以访问 params 和 searchParams
  • layout.tsx 只能访问 params，无法访问 searchParams

4. 命令式导航（程序化导航）

在客户端组件中使用 useRouter 实现导航：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
'use client';

import { useRouter } from 'next/navigation';

export default function Navigator() {
  const router = useRouter();

  return (
    <div>
      <button onClick={() => router.push('/path')}>跳转</button>
      <button onClick={() => router.replace('/path')}>替换跳转</button>
      <button onClick={() => router.back()}>返回</button>
      <button onClick={() => router.refresh()}>刷新</button>
    </div>
  );
}

常用方法

  • router.push(path)：跳转到新路径
  • router.replace(path)：替换当前路径（不新增历史记录）
  • router.back()：返回上一页
  • router.refresh()：刷新当前页面数据

总结

  • 静态跳转 用
  • 动态跳转 用 useRouter
  • params 获取动态路由参数
  • searchParams 获取查询参数（仅在页面可用）
  • 布局组件（layout）无法获取查询参数