聊聊Next.js 15 路由系统：动态路由、路由组

在实际项目开发中，路由设计往往是复杂且关键的环节。比如，面对海量的数据库内容，我们不可能为每篇文章手动定义路由；或者在组织代码时，需要区分移动端和PC端的路由；又或者需要根据用户的登录状态或权限，动态地渲染页面。这些问题在 Next.js 15 中都可以通过其强大的路由系统轻松解决。

1. 动态路由（Dynamic Routes）

动态路由是解决“无法提前确定路由地址”问题的利器。想象一下，你有一个博客网站，每篇文章都有一个唯一的 ID 或标题（slug）。你不可能为每篇文章手动创建一个路由文件，这时动态路由就派上用场了。

1.1. 基础动态路由 [folderName]

在 Next.js 中，动态路由的实现非常简单。你只需要将文件夹名称用方括号括起来，比如 [id] 或 [slug]。这样，当用户访问对应的 URL 时，Next.js 会自动将 URL 中的参数作为 params 传递给页面组件。

举个例子，假设你的博客文章存储在 app/blog 目录下，你可以创建一个名为 [slug] 的文件夹，并在其中添加一个 page.js 文件：

// app/blog/[slug]/page.js
export default function Page({ params }) {
  return <div>文章标题：{params.slug}</div>;
}

当你访问 /blog/my-first-post 时，params 的值为 { slug: 'my-first-post' }。这样，你就可以根据 slug 动态加载文章内容，而无需为每篇文章手动创建路由。

1.2. 捕获所有片段 [...folderName]

有时候，你需要捕获 URL 中的所有后续片段。例如，你有一个电商网站，商品分类可能有多级，如 /shop/clothes/tops/t-shirts。这时，可以使用 [...folderName] 来捕获所有后续片段：

// app/shop/[...slug]/page.js
export default function Page({ params }) {
  return <div>商品路径：{JSON.stringify(params.slug)}</div>;
}

访问 /shop/clothes/tops/t-shirts 时，params.slug 的值为 ['clothes', 'tops', 't-shirts']。

1.3. 可选捕获片段 [[...folderName]]

如果你希望某些路由片段是可选的，可以使用 [[...folderName]]。例如，app/shop/[[...slug]]/page.js 既可以匹配 /shop，也可以匹配 /shop/clothes 或 /shop/clothes/tops/t-shirts：

// app/shop/[[...slug]]/page.js
export default function Page({ params }) {
  return <div>商品路径：{JSON.stringify(params.slug)}</div>;
}

访问 /shop 时，params.slug 为 undefined；访问 /shop/clothes 时，params.slug 为 ['clothes']。

2. 路由组（Route Groups）

路由组是 Next.js 15 中一个非常实用的功能，它可以帮助你将路由按逻辑分组，同时不影响 URL 路径。这在大型项目中尤其有用，可以让你的代码更加清晰、易于维护。

2.1. 按逻辑分组

假设你有一个包含多个模块的项目，比如营销页面和商店页面。你可以将它们分别放在不同的路由组中：

app
├── (marketing)
│   └── about
│       └── page.js
└── (shop)
    └── product
        └── page.js

最终的 URL 会忽略路由组的名称，/about 和 /product 都可以直接访问，而不会包含 (marketing) 或 (shop)。

2.2. 创建不同布局

路由组还可以在同一层级中创建多个布局。例如，你可以为商店页面和营销页面分别定义不同的布局：

app
├── (shop)
│   ├── layout.js
│   └── product
│       └── page.js
├── (marketing)
│   ├── layout.js
│   └── about
│       └── page.js
└── layout.js

这样，/product 页面会使用 (shop)/layout.js，而 /about 页面会使用 (marketing)/layout.js。

2.3. 创建多个根布局

如果你的项目中有多个完全不同的模块，比如一个面向用户的前端页面和一个面向管理员的后台管理系统，你可以为它们分别创建根布局：

app
├── (frontend)
│   ├── layout.js
│   └── home
│       └── page.js
└── (admin)
    ├── layout.js
    └── dashboard
        └── page.js

每个根布局都需要包含 <html> 和 <body> 标签，因为它们是独立的页面。

总结

动态路由

基础动态路由 [folderName] ：适用于根据 URL 参数动态加载内容的场景，例如文章详情页。

捕获所有片段 [...folderName] ：适用于多级路径的场景，例如电商网站的商品分类。

可选捕获片段 [[...folderName]] ：适用于某些路径片段可选的场景，例如默认首页和多级分类混合的场景。

https://www.zuocode.com

路由组

按逻辑分组：将不同模块的路由分组，不影响 URL 路径，使代码结构更清晰。

创建不同布局：在同一层级中为不同模块定义独立的布局，提升代码复用性和可维护性。

创建多个根布局：为完全不同的模块（如前端和后台）定义独立的根布局，适用于大型项目。

作者：ys指风不买醉

链接：https://juejin.cn

+友情链接