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

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

谢谢

Answer 1

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

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

Answer 2

我最终使用了我想避免的解决方案，那就是使用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);
  };

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

2 个答案: