Next.js第五章(动态路由)

动态路由

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

基本用法[slug]

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

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

1//app/shop/[id]/page.tsx
2export default function Page() {
3    return <div>Page</div>
4}
5

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

路由片段[...slug]

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

1//app/shop/[...id]/page.tsx
2export default function Page() {
3    return <div>Page</div>
4}
5

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

可选路由[[...slug]]

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

1//app/shop/[[...id]]/page.tsx
2export default function Page() {
3    return <div>Page</div>
4}
5

• 访问路径为:http://localhost:3000/shop，可以没有参数
• 访问路径为:http://localhost:3000/shop/123，可以有参数
• 访问路径为:http://localhost:3000/shop/123/456，可以有多个参数

这种方式比较灵活。

接受参数

使用useParams hook来接受参数，这个hook只能在客户端组件中使用。

1'use client'
2import { useParams } from "next/navigation";
3export default function ShopPage() {
4  const params = useParams();
5  console.log(params); //{id: '123'}  {id: ['123', '456']} 接受单个值以及多个值
6  return <div>ShopPage</div>;
7}
8

《Next.js第五章(动态路由)》 是转载文章，点击查看原文。