Next.js 实现users/[user]/[dashboard]多参数动态路由的文件结构配置问题

问题原因 #

你当前的文件结构存在两个问题：

1. 用单文件[user].js定义/users/[user]路由的话，无法在该层级下再扩展子路由
2. 你现在的dashboard/[dashboard].js实际匹配的是/users/dashboard/[dashboard]路由，和你预期的/users/[user]/[dashboard]格式不符，自然无法同时拿到user和dashboard两个参数。

调整方案 #

如果你需要匹配的路由格式为/users/[user]/[dashboard]（路径中没有额外的dashboard段，示例：/users/1234/ABCD），调整后的文件结构如下：

pages/
 users/
  - index.js        // 保留，匹配路由 /users
  - [user]/         // 将原来的[user].js改为同名文件夹，用于扩展子路由
    - index.js      // 原来的[user].js的内容放到这里，匹配路由 /users/[user]
    - [dashboard].js   // 匹配路由 /users/[user]/[dashboard]，即你需要的目标路由

调整完成后，你在[dashboard].js中通过useRouter()或者getServerSideProps的context.query就可以同时拿到user和dashboard两个动态参数，示例代码如下：

// pages/users/[user]/[dashboard].js
import { useRouter } from 'next/router'

export default function DashboardPage() {
  const router = useRouter()
  // 两个参数都可以正常获取
  const { user, dashboard } = router.query
  return <div>用户：{user}，看板：{dashboard}</div>
}

如果你实际需要的路由格式是/users/[user]/dashboard/[dashboard]（路径中包含dashboard段，示例：/users/1234/dashboard/ABCD），则调整结构为：

pages/
 users/
  - index.js        // 匹配 /users
  - [user]/
    - index.js      // 匹配 /users/[user]
    - dashboard/
      - [dashboard].js // 匹配 /users/[user]/dashboard/[dashboard]

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