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

【问题标题】：NextJS - Appending a query param to a dynamic routeNextJS - 将查询参数附加到动态路由
【发布时间】：2020-04-27 19:29:55
【问题描述】：

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

这是替换 URL 的函数：

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

在本例中，replace、query 和 pathname 来自下一个路由器。

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

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 中。另外，我知道使用 vanilla JS 可以轻松完成，但这不是重点。

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

谢谢

【问题讨论】：

不要使用 next.js 路由 api，而是使用 window.location。
changeLanguage = (lang: LanguageID) 中的问题您是否尝试设置默认值？还是这是 TypeScript 语法？
@JoseFelix 就像我在帖子中所说的那样，我知道它可以在 vanilla JS 中轻松完成，但如果可能的话，我想避免这种情况。
我认为这里最简单的方法是为pathname 属性赋予来自路由器的asPath 值。
@JoseFelix 该解决方案的问题在于它会导致服务器端重新渲染，如果可能的话我想避免这种情况。这就是我问这个问题的原因，但我开始觉得 Next 不太可能......

标签： javascript reactjs next.js

【解决方案1】：

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

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

【讨论】：

如果您使用 rewrites，请务必小心，因为这种方法行不通。这会将浏览器 url 更改为 pages 文件夹内重写指向的路径，而不是使用正确的 url。对我来说似乎是一个 nextjs 错误。

【解决方案2】：

如果我们想把它作为一个链接 - 像这样使用它：

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

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

【讨论】：

最适合我 :)

【解决方案3】：

我最终使用了我一开始就想避免的解决方案，即使用asPath 值。至少，由于路径相同，因此没有进行服务器端重新渲染。

这是我更新的 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);
  };

【讨论】：