React Academy · 课时

动态路由与路由组

Q: 「动态路由与路由组」这节课中我会学到什么？

创建 [slug] 动态片段、使用 (folder) 创建路由组，以及创建并行路由。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

创建 [slug] 动态片段、使用 (folder) 创建路由组，以及创建并行路由。

第 3 / 4 课12 个步骤

动态路由与路由组 是 CoddyKit 上的免费 React Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

动态片段

将文件夹名称放在方括号中即可创建动态片段。该值可从传递给页面的 params 中获取。

// app/products/[id]/page.tsx
export default function ProductPage({ params }: { params: { id: string } }) {
  return <h1>Product {params.id}</h1>;
}
// → /products/123 → params.id = '123'

类型化参数

URL 中的参数始终是字符串。对于数字 ID，请显式进行解析。

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  if (!post) notFound();
  return <article>{post.content}</article>;
}

全捕获片段

使用 [...slug] 匹配任意数量的路径片段。该值是一个字符串数组。

// app/docs/[...path]/page.tsx
export default function DocsPage({ params }: { params: { path: string[] } }) {
  // /docs/react/hooks → params.path = ['react', 'hooks']
  return <DocViewer path={params.path} />;
}

可选全捕获片段

[[...slug]] 也会匹配根片段，适用于可选的路径前缀。

// app/[[...lang]]/page.tsx
// Matches /, /en, /en/about, /fr/products/123
export default function Page({ params }: { params: { lang?: string[] } }) {
  const lang = params.lang?.[0] ?? 'en';
  return <div lang={lang}>...</div>;
}

generateStaticParams

导出 generateStaticParams()，即可在构建时预渲染动态路由，为每种参数组合生成静态 HTML。

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(p => ({ slug: p.slug }));
}
// → builds /blog/hello-world, /blog/react-tips etc. statically

路由组 —（文件夹）

将文件夹名称放在圆括号中即可创建路由组。它可以组织文件，但不会添加 URL 片段。

// File structure:
// app/(marketing)/about/page.tsx → /about
// app/(marketing)/blog/page.tsx  → /blog
// app/(app)/dashboard/page.tsx   → /dashboard
// (marketing) and (app) don't appear in URLs

使用共享布局的路由组

每个路由组都可以拥有自己的 layout.tsx，从而为不同区域提供不同布局，而无需在 URL 中嵌套。

// app/(marketing)/layout.tsx — marketing shell
// app/(app)/layout.tsx — authenticated app shell
// Both groups share app/layout.tsx as the root

并行路由 — @slot

在文件夹名称前加上 @ 即可创建插槽。插槽会同时渲染在父布局中，适用于模态框、分屏或标签页。

// app/@modal/login/page.tsx
// app/layout.tsx
export default function RootLayout({ children, modal }) {
  return (
    <div>
      {children}
      {modal} {/* renders @modal/login/page.tsx side by side */}
    </div>
  );
}

拦截路由 — (..)

使用 (..) 表示法拦截路由并以内嵌方式渲染它（例如，在模态框中打开照片，而不是导航到新页面）。

// Soft navigation shows modal:
// app/@modal/(..)/photos/[id]/page.tsx
// Hard navigation shows full page:
// app/photos/[id]/page.tsx

动态路由元数据

在动态路由中导出异步 generateMetadata 函数，根据路由参数设置每个页面的 SEO 标签。

export async function generateMetadata({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  return { title: product.name, description: product.description };
}

快速检查

在 Next.js App Router 中，将文件夹名称放在圆括号中会有什么作用？

在交互式课程中回答

回顾

[id] 创建动态片段，[...slug] 捕获所有子路径，而 [[...slug]] 使其成为可选项。使用 (name) 的路由组可以在不影响 URL 的情况下组织代码，并启用组级布局。使用 generateStaticParams 进行构建时预渲染。

免费开始

用 AI 导师学习 React — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 88
课程: 324

免费开始学习查看完整课程

常见问题解答

「动态路由与路由组」课时是免费的吗？

是的 — 「动态路由与路由组」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「动态路由与路由组」这节课中我会学到什么？

创建 [slug] 动态片段、使用 (folder) 创建路由组，以及创建并行路由。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「动态路由与路由组」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy