Next.js动态路由后的索引



通常在Next.js中,你可以通过如下文件结构实现动态路由:

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

我正在努力实现一个"工作空间"。标识符,这样当用户登录时,他们相关的工作空间就会从API中检索出来,然后他们就可以被路由到属于该工作空间的路由,例如:

www.website.com/WorkSpaceName/

有可能做到这一点,而不必有一些中间段塞吗?

可以将所有的"命名空间"像这样的路由:

[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.jspages/[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)。

相关内容

  • 没有找到相关文章

最新更新