Tutorial React: Navegación programática y redireccionamiento

Navegación programática con useNavigate

En React Router v6, useNavigate es un hook que se utiliza para realizar navegación programática dentro de una aplicación React. Este hook reemplaza al método useHistory utilizado en versiones anteriores de React Router. Proporciona una forma sencilla y directa para navegar a diferentes rutas desde el código, sin necesidad de interacción del usuario.

Para utilizar useNavigate, primero hay que importarlo desde react-router-dom:

// BotonNavegacion.jsx
import { useNavigate } from 'react-router-dom';

export default function BotonNavegacion() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/about');
  };

  return (
    <button onClick={handleClick}>
      Navegar a Ruta Destino
    </button>
  );
}

En este ejemplo, cuando el usuario hace clic en el botón, la aplicación navega programáticamente a la ruta /about.

useNavigate también permite pasar estado a la ruta destino. Esto puede ser útil para pasar información adicional que no se desea incluir en la URL:

// BotonNavegacionConEstado.jsx
import { useNavigate } from 'react-router-dom';

export default function BotonNavegacionConEstado() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/ruta-destino', { state: { userId: 123 } });
  };

  return (
    <button onClick={handleClick}>
      Navegar con Estado
    </button>
  );
}

En la ruta destino, se puede acceder al estado pasado mediante el hook useLocation:

// About.jsx
import { useLocation } from "react-router-dom";

export default function About() {
  const location = useLocation();
  const { userId } = location.state || {};

  return (
    <div>
      <h1>About Page</h1>
      <p>ID de Usuario: {userId}</p>
    </div>
  )
}

useNavigate también soporta la navegación hacia atrás y hacia adelante en el historial del navegador:

// BotonesNavegacionHistorial.jsx
import { useNavigate } from 'react-router-dom';

export default function BotonesNavegacionHistorial() {
  const navigate = useNavigate();

  const handleBack = () => {
    navigate(-1); // Navegar hacia atrás
  };

  const handleForward = () => {
    navigate(1); // Navegar hacia adelante
  };

  return (
    <div>
      <button onClick={handleBack}>
        Atrás
      </button>
      <button onClick={handleForward}>
        Adelante
      </button>
    </div>
  );
}

Redirecciones condicionales

En React Router v6, las redirecciones condicionales se pueden implementar de manera eficiente utilizando hooks como useNavigate y componentes como <Navigate>. Este enfoque permite redirigir a los usuarios a diferentes rutas basadas en ciertas condiciones lógicas, mejorando la experiencia del usuario y la seguridad de la aplicación.

Para realizar una redirección condicional, primero se debe importar useNavigate desde react-router-dom. Este hook permite la navegación programática en función de condiciones específicas. Un caso típico es redirigir a los usuarios no autenticados a una página de inicio de sesión.

// BotonAccesoCondicional.jsx
import { useNavigate } from 'react-router-dom';

export default function BotonAccesoCondicional({ userIsLoggedIn }) {
  const navigate = useNavigate();

  const handleNavigation = () => {
    if (!userIsLoggedIn) {
      navigate('/login');
    } else {
      navigate('/dashboard');
    }
  };

  return (
    <button onClick={handleNavigation}>
      Ir a Dashboard o Login
    </button>
  );
}

En este ejemplo, handleNavigation comprueba si el usuario está autenticado (userIsLoggedIn). Si no lo está, navega a la ruta /login; de lo contrario, navega a /dashboard.

Otra forma de realizar redirecciones condicionales es utilizando el componente <Navigate> dentro de la estructura de componentes JSX. Este método es útil cuando se necesita realizar una redirección como parte del renderizado del componente.

// ProtectedRoute.jsx
import { Navigate } from 'react-router-dom';

export default function ProtectedRoute({ isAuthenticated, children }) {
  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  return children;
}

En este ejemplo, el componente ProtectedRoute verifica si el usuario está autenticado. Si no lo está, el componente <Navigate> redirige automáticamente al usuario a la ruta /login, bloqueando el acceso a las rutas protegidas. Si el usuario está autenticado, el componente simplemente renderiza los children, permitiendo el acceso al contenido protegido.

Las redirecciones condicionales también pueden basarse en datos de la aplicación, como roles de usuario o permisos.

Ejemplo de como se redirige a los usuarios según su rol.

// BotonNavegacionPorRol.jsx
import { useNavigate } from 'react-router-dom';

export default function BotonNavegacionPorRol({ userRole }) {
  const navigate = useNavigate();

  const handleNavigation = () => {
    if (userRole === 'admin') {
      navigate('/admin-dashboard');
    } else if (userRole === 'user') {
      navigate('/user-dashboard');
    } else {
      navigate('/login');
    }
  };

  return (
    <button onClick={handleNavigation}>
      Navegar según el Rol
    </button>
  );
}

En este código, handleNavigation verifica el rol del usuario (userRole) y navega a diferentes rutas basándose en ese valor. Si el rol es 'admin', navega a /admin-dashboard; si es 'user', navega a /user-dashboard; de lo contrario, navega a /login.