Question

104

Next.js change locale for the current path that has query, using router

rated 0 times [ 105] [ 1] / answers: 1 / hits: 7275 / 3 Years ago, sat, november 20, 2021, 12:00:00

I have a central place to change locale. I show a list of locales, and when the user clicks on any of them, I use useRouter to redirect the user to the current page, but in the selected locale:

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>

It works very well for URLs that have no parameters. But when the URL has parameters, it gets duplicated. For example, I have a list of conferences and when the user clicks on a conference I'll take him to the conference page using this Link:

<Link

    href={{

        pathname: '/conference/[id]',

        query: { id: conf.id }

    }}

This takes the user to the example.com/conference/5 for example. But when the user changes the locale on that page, I see the URL is changed to example.com/conference/5?id=5. As you can see, I have two duplicated id parameters here. And If I don't pass query to router.push, I see this error:

Error: The provided href (/conference/[id]) value is missing query values (id) to be interpolated properly. Read more: https://nextjs.org/docs/messages/href-interpolation-failed

How should I effectively reroute users and keep URL structure and parameters?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazminuniquer

Add To Favorites

Follow

Total Points: 63

Total Questions: 121

Total Answers: 96

Location: Cambodia

Member since Thu, May 21, 2020

4 Years ago

jazminuniquer questions

1 Error: bundle initial-es5 exceeded maximum budget. Budget 6.00 MB was not met by 133.51 kB with a total of 6.13 MB

Thu, Feb 18, 21, 00:00, 3 Years ago

1 How to get values from client.users.fetch(id) in discord.js

Thu, Sep 3, 20, 00:00, 4 Years ago

1 Apply motion to react component Framer-Motion

Thu, Jun 25, 20, 00:00, 4 Years ago

1 Vuetify - How to select a row data using v-radio-group in v-data-table

Tue, May 19, 20, 00:00, 4 Years ago

1 How to change the background color when I click a < li> in Angular?

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 3 Years ago raynamadilynl · Accepted Answer

This worked for me:

    const changeLocale = (locale) => {

        router.push({

            route: router.pathname,

            query: router.query

        }, router.asPath, { locale });

    }

Basically, I only changed the second parameter of the router.push method.

I took it from the docs:

Note that to handle switching only the locale while preserving all routing information such as dynamic route query values or hidden href query values, you can provide the href parameter as an object:

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 })