索引后的 Next.js 动态路由答案

【问题标题】：Next.js dynamic route right after index索引后的 Next.js 动态路由
【发布时间】：2021-02-25 16:47:52
【问题描述】：

通常在 Next.js 中，您可以使用以下文件结构实现动态路由：

pages/products/[id].js 这将导致www.website.com/products/productId2323

我试图在我的路由中实现“工作区”标识符，以便当用户登录时，从 API 检索他们的相关工作区，然后可以将它们路由到属于该工作区的路由，例如：

www.website.com/WorkSpaceName/

是否有可能做到这一点而不必有一些中间的蛞蝓？

【问题讨论】：

标签： reactjs next.js dynamic-routing

【解决方案1】：

您可以像这样对所有“命名空间”路由进行分组：

[18:10:47] /tmp/my-app ● $ tree -n 2 pages/
2 [error opening dir]
pages/
├── _app.js
├── index.js
├── posts
│   ├── [id].js
│   └── index.js
└── [workspace]
    ├── dashboard.js
    └── index.js

2 directories, 6 files

在这种情况下请求：

/something/dashboard 将被路由到 pages/[workspace]/dashboard.js
/something 将被路由到 pages/[workspace]/index.js
/posts 将被路由到 pages/posts/index.js（因为非动态路由优先于动态路由）
/posts/something 将被路由到 pages/posts/[id].js

在pages/[workspace]/dashboard.js 和pages/[workspace]/index.js 文件中，像这样探测路由器：

[18:10:50] /tmp/my-app ● $ cat pages/\[workspace\]/dashboard.js 
import { useRouter } from 'next/router'

const Dashboard = () => {
  const router = useRouter()
  const workspace = router.query.workspace

  return (
    <>
      <h1>Dashboard: {workspace}</h1>
    </>
  )
}

export default Dashboard

应该产生分配给workspace 变量的预期值（因此访问/something/dashboard 应该呈现Dashboard: something）。

【讨论】：