如何在 NextJS 中添加动态 basePath答案

【问题标题】：How to add dynamic basePath in NextJS如何在 NextJS 中添加动态 basePath
【发布时间】：2021-09-08 14:15:57
【问题描述】：

我正在创建一个应用程序，我想将 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`} />
    )
}

ps。如果您认为我最初的方法不好，我也对任何其他建议感兴趣。

【问题讨论】：

你能把你试过的代码给我们吗
@JoeWarner 我将更新我的帖子并包含一些代码来解释我目前想到的方法
dynamic route 不是更适合这个用例吗？
@juliomalves 我正在使用动态路由。现在我需要一种方法来为这些路由使用动态 id 来引导我的链接。

标签： javascript reactjs next.js

【解决方案1】：

看来你不需要basePath，你可以定义一个二级链接组件，将groupID作为一个道具，并将它放在href之前，就像这样的伪代码：

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

如果 groupId 是全局状态/值，您可以从 cookie（或 context）中读取它，例如：

const BlahBlahLink = ({ href }) => {
  const [groupId] = useContenxt(BlahBlahContext);

  return <Link href={groupId + href} />;
};

【讨论】：

是的，这就是我最初想要做的，但是我认为 nextJs 可能有一些我不知道的内置方法。否则，这种方法最适合这种情况，应被视为有效答案。谢谢！