动态路由

动态路由是指在路由中使用方括号[]来定义路由参数，例如/blog/[id]，其中[id]就是动态路由参数，因为在某些需求下，我们需要根据不同的id来显示不同的页面内容，例如商品详情页，文章详情页等。

基本用法[slug]

使用动态路由只需要在文件夹名加上方括号[]即可，例如[id],[params]等，名字可以自定义。

来看demo: 我们在app/shop目录下创建一个[id]目录

Server Component 获取参数的方式：

interface IProps {
  params: Promise<{ id: string }>;
}

export default async function Page({ params }: IProps) {
  const { id } = await params;
  return <div>Page: {id}</div>;
}

Client Component 获取参数的方式：

'use client'
import { useParams } from "next/navigation";

export default function Page() {
  const { id } = useParams();
  return <div>Page: {id}</div>;
}

访问路径为:http://localhost:3000/shop/123456 其中123456就是动态路由参数，这个可以是任意值。

路由片段[…slug]

我们如果需要捕获多个路由参数，例如/shop/123/456，我们可以使用路由片段来捕获多个路由参数，他的用法就是[...slug]，其中slug就是路由片段，这个名字可以自定义，后面的片段有多少就捕获多少。

访问路径为:http://localhost:3000/shop/123/456 其中123和456就是动态路由参数，后面的片段有多少就捕获多少。

可选路由[[…slug]]

可选路由指的是，我们可能会有这个路由参数，也可能会没有这个路由参数，例如/shop/123，也可能是/shop，我们可以使用可选路由来捕获这个路由参数，他的用法就是[[...slug]]，其中slug就是路由片段，这个名字可以自定义，后面的片段有多少就捕获多少。