动态路由
1.1 [folderName]
使用动态路由，需要将文件夹的名字用方括号括住，比如 [id]、[slug]。这个路由的名字会作为 params prop 传给布局、 页面、 路由处理程序 以及 generateMetadata 函数。
🍐：在app/blog目录下新建一个名为[slug]的文件夹，在该文件夹新建一个page.js文件，代码如下
// app/blog/[slug]/page.js
export default function Page({params}){
return <div> My post:{params.slug}</div>
}
效果如下：
- 当访问/blog/a时。params的值为{slug:'a'}
- 当访问/blog/hello时，params的值为{slug:'hello'}
- 以此类推(如果[slug]换成其他的，如[id]等，则对应的params的值为{id:'xxx'})
1.2 [...folderName]---会捕获所有的路由片段
🍐： 在app/shop/[...slug]/page.js中
// app/shop/[...slug]/page.js
export default function Page({params}){
return <div> My Shop:{JSON.stringify(params)}</div>
}
效果如下：
- 当访问/shop/a时。params的值为{slug:['a']}
- 当访问/shop/a/b时，params的值为{slug:['a','b']}
- 当访问/shop/a/b/c时，params的值为{slug:['a','b','c']}
- 以此类推
1.3[[...folderName]] 相当于是1和2的之和（包含[floaderName]和[...folderName]）
🍐：
//app/shop/[[...slug]]/page.js
export default function Page({params}){
return <div> My Shop:{JSON.stringify(params)}</div>
}
效果如下：
-
当访问
/shop的时候，params 的值为{}。 -
当访问
/shop/a的时候，params 的值为{ slug: ['a'] }。 -
当访问
/shop/a/b的时候，params 的值为{ slug: ['a', 'b'] }。 -
当访问
/shop/a/b/c的时候，params 的值为{ slug: ['a', 'b', 'c'] }。 -
以此类推。
路由组
在 app目录下，文件夹名称通常会被映射到 URL 中，但你可以将文件夹标记为路由组，阻止文件夹名称被映射到 URL 中。
**文件夹用括号括住**，例如：(shop)
平行路由
平行路由的使用方式是将文件夹以@作为开头进行命名。
平行路由的用途：
1.1 条件渲染
1.2 独立路由处理
1.3 子导航
拦截路由
在 Next.js 中，实现拦截路由需要你在命名文件夹的时候以 (..) 开头，其中：
(.)表示匹配同一层级(..)表示匹配上一层级(..)(..)表示匹配上上层级。(...)表示匹配根目录
