通常在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.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
)。