在我的 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 中。另外,我知道使用 vanilla JS 可以轻松完成,但这不是重点。
我错过了什么吗?有没有更简单的方法可以将查询参数附加到动态路由而不进行服务器端重新渲染?
谢谢