Tengo un lugar central para cambiar la configuración regional. Muestro una lista de configuraciones regionales, y cuando el usuario hace clic en cualquiera de ellas, uso useRouter para redirigir al usuario a la página actual , pero en la configuración regional seleccionada:
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> Funciona muy bien para URLs que no tienen parámetros. Pero cuando la URL tiene parámetros, se duplica. Por ejemplo, tengo una lista de conferencias y cuando el usuario hace clic en una conferencia, lo llevaré a la página de la conferencia usando este Link :
<Link href={{ pathname: '/conference/[id]', query: { id: conf.id } }} Esto lleva al usuario a example.com/conference/5 , por ejemplo. Pero cuando el usuario cambia la configuración regional en esa página, veo que la URL cambia a example.com/conference/5?id=5 . Como puede ver, tengo dos parámetros de identificación duplicados aquí. Y si no paso la query a router.push , veo este error:
Error: al valor
href(/conference/[id]) proporcionado le faltan valores de consulta (id) para interpolarlos correctamente. Leer más: https://nextjs.org/docs/messages/href-interpolation-failed
¿Cómo debo redirigir a los usuarios de manera efectiva y mantener la estructura y los parámetros de la URL?
Esto funcionó para mí:
const changeLocale = (locale) => { router.push({ route: router.pathname, query: router.query }, router.asPath, { locale }); } Básicamente, solo cambié el segundo parámetro del método router.push .
Lo tomé de los documentos :
Tenga en cuenta que para controlar el cambio de configuración regional y conservar toda la información de enrutamiento, como los valores de consulta de ruta dinámica o los valores de consulta href ocultos, puede proporcionar el parámetro href como un objeto:
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 })