Next.js 索引后的动态路由

Question

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

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

我正在尝试在我的路线中获得一个“工作区”标识符，以便当用户登录时，他们的相关工作区是从 API 中检索的，然后他们可以被路由到属于该路线的路线工作区，例如：

www.website.com/WorkSpaceName/

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

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

Next.js 索引后的动态路由

Next.js dynamic route right after index

reactjs

next.js

dynamic-routing