紧跟在 index

如何解决紧跟在 index

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

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

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

www.website.com/WorkSpaceName/

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

解决方法

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

[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）。