¿Cómo redirigir en React Router v5 conservando todos los parámetros?

Redirigir rutas en React Router v5 parece sencillo… hasta que necesitas conservar los parámetros. Si estás usando <Redirect> y te diste cuenta de que los parámetros desaparecen en el salto de ruta, este artículo es para ti.

❓El problema

Estás intentando hacer algo como esto:

<Redirect exact from='/:store' to={ROUTES.products} />

Y esperas que al visitar /tienda-x, te redirija a /productos?store=tienda-x. Pero sorpresa: React Router v5 no pasa los params automáticamente.

¿Y ahora qué?

Tienes dos caminos para lograrlo: con render en la ruta o usando un componente dedicado. Vamos por partes.

🔀 Opción 1: Usar render para acceder a los params

<Route
	exact
	path='/:store'
	render={({ match }) => <Redirect to={`${ROUTES.products}?store=${match.params.store}`} />}
/>

Esto funciona si sabes qué parámetro esperas (store, en este caso).

🔄 Opción 2: Redirigir con un componente que conserva todo

Esta es la forma más flexible: usamos useLocation para recuperar lo que venga por la URL, y lo pasamos tal cual al nuevo destino.

import { Redirect, useLocation } from 'react-router-dom'

const RedirectWithParams = () => {
	const location = useLocation()

	return <Redirect to={`${ROUTES.products}${location.search}`} />
}

Y lo usas así:

<Route exact path='/:store' component={RedirectWithParams} />

💡 Esto conserva los query params, como ?ref=campaña1, etc.

⚠️ Ojo: Esto no copia los path params, solo los query. Si quieres conservar /:store como parte de la nueva ruta, tendrías que capturar match.params también.

¿Y si no sé qué parámetros llegarán?

Perfecto. la segunda opción es tu mejor aliada. Es sencilla, clara y se adapta a lo que venga por la URL.

✅ Conclusión

Con React Router v5 puedes redirigir y conservar todos los parámetros fácilmente. Usa render si sabes los params que vienen, o crea un componente con useLocation para algo más dinámico.

¡Gracias por leer!