type
status
date
slug
summary
tags
category
icon
password
Edited
Mar 1, 2023 05:59 AM
Created
Feb 28, 2023 08:34 AM
Layouts
Nested Layouts（嵌套布局）
配置Head
Grouped Layouts
路由组可用于：
- 在不影响 URL 结构的情况下组织路由。
- 选择将特定路线段加入布局
- 通过拆分您的应用程序来创建多个根布局
动态路由
可以通过将文件夹的名称括在方括号中来创建动态段。例如，或 .
[folderName] [id] [slug]例如，一个简单的博客可以包含以下路由，其中是博客文章的动态区段。
app/blog/[slug]/page.js路线 | 示例网址 | 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' } |
动态区段可以通过在括号内添加省略号来扩展以捕获所有后续段。
[...folderName]路线 | 示例网址 | 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]]路线 | 示例网址 | 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'] } |
generateStaticParams函数
服务器函数可以与动态路由段结合使用，以定义将在构建时静态生成的路由段参数列表，而不是在请求时按需生成。
generateStaticParams路由配置信息
File Conventions
Loading
loading.tsx和
generateStaticParams函数不能同时使用，会导致loading.tsx失效Error
Not Found
Data Fetching
Route Handlers
- 作者:JinSo
- 链接:https://jinso365.top/article/next13-achieve
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。