如何在NextJS中添加动态basePath

Question

我正在创建一个应用程序，我想把groupID在实际的URL之前，像这样的'https://web-site.com/1/tasks'。在nextJs文档中描述了一个basePath，但是它是在构建时创建的，不能更改。我目前的项目有很多路由，所以我必须手动添加${groupID}到我所有的Link组件，或者为Link创建一个装饰器。所以我想知道在NextJs中是否有这种事情的最佳实践?

一些上下文的代码:

import { useRouter } from 'next/router';
const Example = () => {
const {query} = useRouter()
return(
<Link href={`${query.groupID}/tasks`} />
)
}

p。如果你认为我最初的方法不好，我也想听听其他的建议。

Answer 1

似乎你不需要basePath，你可以定义一个次要的链接组件，把groupID作为一个道具，并把它放在href之前，像这样的伪代码:

const BlahBlahLink = ({groupId, href}) => <Link href={groupId + href} /> 

如果groupId是一个全局状态/值，你可以从cookie(或上下文)中读取，例如:

const BlahBlahLink = ({ href }) => {
const [groupId] = useContenxt(BlahBlahContext);
return <Link href={groupId + href} />;
};