Next.js Pages Router如何实现users/id/profile嵌套动态路由

Pages Router 采用文件系统映射路由的规则，不需要手动编写路由配置，只需要按照约定在pages目录下创建对应结构的文件即可，具体实现如下：

搭建目录结构 #

在项目的pages目录（如果项目初始化时配置了src目录，则对应src/pages路径）下创建如下文件结构，使用JavaScript开发时把文件后缀换成.js/.jsx即可：

pages/
└── users/
    ├── index.tsx
    └── [id]/
        ├── index.tsx
        └── profile.tsx

各文件对应路由规则 #

• 所有用户列表页（匹配路径/users）：对应pages/users/index.tsx文件，直接在文件内编写用户列表的业务逻辑即可，访问/users路径时会自动渲染该组件。
• 单个用户页面（匹配路径/users/[id]）：对应pages/users/[id]/index.tsx文件，其中[id]是动态路由段的固定命名格式，会匹配/users/后的任意用户ID值。你可以在组件内通过Next.js内置的useRouter钩子获取路径上的ID参数，示例代码：

import { useRouter } from 'next/router'

export default function UserDetailPage() {
  const router = useRouter()
  const { id } = router.query // id即为路径上传递的用户ID
  return <div>用户ID为 {id} 的详情页</div>
}

• 指定用户个人资料页（匹配路径/users/[id]/profile）：对应pages/users/[id]/profile.tsx文件，访问路径如/users/123/profile时会自动渲染该组件，同样可以通过useRouter获取当前路径对应的用户ID。

注意：动态路由段的文件夹/文件名必须用方括号包裹，参数名和router.query中读取的字段名保持一致即可，和路径语义对齐推荐命名为[id]。同一路由层级不要同时存在同名的动态路由文件和静态路由文件，否则会出现匹配冲突。

内容的提问来源于stack exchange，提问作者Barty