Cómo redirigir a una ruta con React Router
En React Router, redirigir a una ruta específica es una tarea común cuando se implementan funcionalidades como protección de rutas, navegación programática o gestión de flujos de usuario. A continuación, te explicamos cómo hacerlo de manera efectiva.
Uso de useNavigate para redirigir
A partir de React Router v6, la forma recomendada de redirigir a una ruta es utilizando el hook useNavigate. Este permite realizar redirecciones programáticas dentro de componentes funcionales.
import { useNavigate } from "react-router-dom";
function MiComponente() {
const navigate = useNavigate();
const handleRedirigir = () => {
navigate("/ruta-destino"); // Cambia "/ruta-destino" por la ruta deseada
};
return (
<button onClick={handleRedirigir}>Ir a la ruta destino</button>
);
}
Redirección automática con el componente Navigate
Otra opción es utilizar el componente Navigate, ideal para redirigir de forma condicional en el árbol de componentes.
import { Navigate } from "react-router-dom";
function ProteccionDeRuta({ isLoggedIn }) {
return isLoggedIn ? (
<h1>Bienvenido</h1>
) : (
<Navigate to="/login" replace={true} />
);
}Algunos ejemplos prácticos
1. Redirigir después de una acción:
Usa useNavigate para navegar después de un formulario enviado exitosamente.
2. Protección de rutas:
Combina el componente Navigate con lógica de autenticación para redirigir a usuarios no autenticados.
3. Redirigir automáticamente al inicio:
Una página de error 404 puede usar Navigate para redirigir al usuario a la página principal.
function PaginaNoEncontrada() {
return <Navigate to="/" replace />;
}Referencia oficial
Para más información, consulta la documentación oficial de React Router.
Jorge García
Fullstack developer