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

Question

在我的 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 可以轻松完成，但这不是重点。

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

谢谢

Answer 1

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

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