动态路由
当你事先不知道确切的段名称,并希望从动态数据创建路由时,可以使用在请求时填充或在构建时 预渲染 的动态段。
约定
通过将文件夹名称用方括号括起来,可以创建动态段:[folderName]
。例如,[id]
或 [slug]
。
动态段作为 params
属性传递给 layout
、page
、route
和 generateMetadata
函数。
示例
例如,一个博客可能包含以下路由 app/blog/[slug]/page.js
,其中 [slug]
是博客文章的动态段。
路由 | 示例 URL | params |
---|---|---|
app/blog/[slug]/page.js | /blog/a | { slug: 'a' } |
app/blog/[slug]/page.js | /blog/b | { slug: 'b' } |
app/blog/[slug]/page.js | /blog/c | { slug: 'c' } |
查看 generateStaticParams() 页面,了解如何为段生成参数。
值得注意的是:动态段等同于
pages
目录中的 动态路由。
生成静态参数
generateStaticParams
函数可与 动态路由段 结合使用,以在构建时 静态生成 路由,而不是在请求时按需生成。
generateStaticParams
函数的主要优势在于其智能数据检索。如果在 generateStaticParams
函数中使用 fetch
请求获取内容,这些请求会 自动被记忆化。这意味着在多个 generateStaticParams
、布局和页面中使用相同参数的 fetch
请求只会执行一次,从而减少构建时间。
如果你正在从 pages
目录迁移,请使用 迁移指南。
有关更多信息和高级用例,请参阅 generateStaticParams
服务器函数文档。
捕获所有段
动态段可以通过在括号内添加省略号来扩展为 捕获所有 后续段:[...folderName]
。
例如,app/shop/[...slug]/page.js
将匹配 /shop/clothes
,同时也匹配 /shop/clothes/tops
、/shop/clothes/tops/t-shirts
等。
路由 | 示例 URL | params |
---|---|---|
app/shop/[...slug]/page.js | /shop/a | { slug: ['a'] } |
app/shop/[...slug]/page.js | /shop/a/b | { slug: ['a', 'b'] } |
app/shop/[...slug]/page.js | /shop/a/b/c | { slug: ['a', 'b', 'c'] } |
可选的捕获所有段
捕获所有段可以通过将参数包含在双方括号中来设为 可选:[[...folderName]]
。
例如,app/shop/[[...slug]]/page.js
除了匹配 /shop/clothes
、/shop/clothes/tops
、/shop/clothes/tops/t-shirts
,还会 同时 匹配 /shop
。
捕获所有 和 可选捕获所有 段的区别在于,可选的情况下,不带参数的路由也会被匹配 (上例中的 /shop
)。
路由 | 示例 URL | params |
---|---|---|
app/shop/[[...slug]]/page.js | /shop | {} |
app/shop/[[...slug]]/page.js | /shop/a | { slug: ['a'] } |
app/shop/[[...slug]]/page.js | /shop/a/b | { slug: ['a', 'b'] } |
app/shop/[[...slug]]/page.js | /shop/a/b/c | { slug: ['a', 'b', 'c'] } |
TypeScript
使用 TypeScript 时,你可以根据配置的路由段为 params
添加类型。
路由 | params 类型定义 |
---|---|
app/blog/[slug]/page.js | { slug: string } |
app/shop/[...slug]/page.js | { slug: string[] } |
app/shop/[[...slug]]/page.js | { slug?: string[] } |
app/[categoryId]/[itemId]/page.js | { categoryId: string, itemId: string } |
值得注意的是:将来 TypeScript 插件 可能会自动完成这项工作。