#路由篇之动态路由

#使用场景

有的时候，并不能提前知道路由的地址，就比如根据 URL 中的 id 参数展示该 id 对应的文章内容，文章那么多，我们不可能一一定义路由，这个时候就需要用到动态路由。

#动态路由

#[FolderName]

使用动态路由，需要将文件夹的名字用方括号括住，比如 [id]、[slug]

这个路由的名字会作为 param prop 传给布局（layout）、 页面（page）、 路由处理程序（route）以及 generateMetadata（用于生成页面元数据） 函数

export default function Page({ params }) {
  return <div>My Post: {params.slug}</div>;
}

Example

#[...FolderName]

如果在方括号内添加省略号，比如 [...folderName]，这表示捕获所有后面所有的路由片段。

app/blog/[...slug]/page.js会匹配 /blog/clothes，也会匹配 /blog/clothes/tops、/blog/clothes/tops/t-shirts等

注意： 不会匹配不带参数的地址，如app/blog

Example

#[[...FolderName]]

如果在双方括号内添加省略号，比如 [[...folderName]]，这表示可选的捕获所有后面所有的路由片段。

路由匹配方式与[...FloderName]相同

与上一种的区别就在于，不带参数的路由也会被匹配，比如 app/blog

Example