Next.js 使用路由器更改具有查询的当前路径的区域设置

Question

我有一个可以更改区域设置的中心位置。我显示了区域设置列表，当用户单击其中任何一个时，我将useRouter用户重定向到当前页面，但在选定的区域设置中：

var router = useRouter();

const changeLocale = (selectedLocal) => {
    router.push({
            pathname: router.pathname,
            query: router.query
        }, {
            pathname: router.pathname,
            query: router.query
        }, { locale });
}

<div onClick={() => changeLocale('fr')}>Fr</div>

它对于没有参数的 URL 非常有效。但是当 URL 有参数时，它就会重复。例如，我有一个会议列表，当用户单击会议时，我将使用以下命令将他带到会议页面Link：

<Link
    href={{
        pathname: '/conference/[id]',
        query: { id: conf.id }
    }}

这将用户带到example.com/conference/5示例中。但是，当用户更改该页面上的区域设置时，我看到 URL 更改为example.com/conference/5?id=5. 正如你所看到的，我这里有两个重复的 id 参数。如果我不传递query给router.push，我会看到此错误：

错误：提供的href(/conference/[id]) 值缺少需要正确插值的查询值 (id)。了解更多： https: //nextjs.org/docs/messages/href-interpolation-failed

我应该如何有效地重新路由用户并保留 URL 结构和参数？

Answer 1

这对我有用：

    const changeLocale = (locale) => {
        router.push({
            route: router.pathname,
            query: router.query
        }, router.asPath, { locale });
    }

基本上，我只更改了该方法的第二个参数router.push。

我从文档中获取了它：

请注意，要仅处理区域设置的切换，同时保留所有路由信息（例如动态路由查询值或隐藏的 href 查询值），您可以将 href 参数作为对象提供：

import { useRouter } from 'next/router'
const router = useRouter()
const { pathname, asPath, query } = router
// change just the locale and maintain all other route information including href's query
router.push({ pathname, query }, asPath, { locale: nextLocale })