NextJS - 将查询参数附加到动态路由

IT技术 javascript reactjs next.js
2021-05-04 10:03:03

在我的 NextJS 应用程序中,我有一个在每个页面上都可见的语言选择器。当我选择一种新语言时,我只想通过lang=en向其附加查询参数替换当前 URL

这是替换 URL 的函数:

const changeLanguage = (lang: LanguageID) => {
    replace({
      pathname,
      query: { ...query, lang },
    });
  };

在本例中replacequerypathname来自下一个路由器。

现在,一切都适用于静态路由,但我无法使其适用于动态路由。例如,我有以下文件夹结构:

pages
|_customers
|__index.tsx
|__[customerId].tsx

如果我打开http://localhost/customers并将我的语言更改为英语,则 URL 将更改为http://localhost/customers?lang=en我想要的。但是,如果我打开http://localhost/customer/1并将语言更改为英语,则 URL 将更改为http://localhost/customers/[customerId]?customerId=1&lang=en,而不是我期望的 URL http://localhost/customers/1?lang=en

现在,我知道我可以asPath在路由器上使用,并通过附加lang到它来重建查询字符串对象,但我觉得它应该构建到 Next.js 中。另外,我知道使用 vanilla JS 可以轻松完成,但这不是重点。

我错过了什么吗?有没有更简单的方法可以将查询参数附加到动态路由而不进行服务器端重新渲染?

谢谢

3个回答

只需向当前路由器添加更多参数,然后自行推送

const router = useRouter();
router.query.NEWPARAMS = "VALUE"
router.push(router)

我最终使用了我首先想避免的解决方案,即玩弄asPathvalue。至少,由于路径相同,因此没有进行服务器端重新渲染。

这是我更新的changeLanguage功能(stringifyUrl来自query-string包)

  const changeLanguage = (lang: LanguageID) => {
    const newPathname = stringifyUrl({ url: pathname, query: { ...query, lang } });
    const newAsPath = stringifyUrl({ url: asPath, query: { lang } });
    replace(newPathname, newAsPath);
  };

如果我们想将此作为链接 - 像这样使用它:

// ...
const router = useRouter();
// ...

<Link
    href={{
        pathname: router.pathname,
        query: { ...router.query, lang },
    }}
    passHref
    shallow
    replace
></Link>