React Router

Que es React Router?

React Router es la libreria de enrutamiento estandar para React. Permite la navegacion entre diferentes vistas de tu aplicacion sin recargar la pagina completa.

Configuracion Basica

// npm install react-router-dom

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Inicio</Link>
        <Link to="/acerca">Acerca</Link>
        <Link to="/contacto">Contacto</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Inicio />} />
        <Route path="/acerca" element={<Acerca />} />
        <Route path="/contacto" element={<Contacto />} />
        <Route path="*" element={<NoEncontrado />} />
      </Routes>
    </BrowserRouter>
  );
}

Parametros de Ruta

import { useParams } from 'react-router-dom';

// Configuracion de ruta
<Route path="/usuarios/:id" element={<PerfilUsuario />} />

// Componente que usa el parametro
function PerfilUsuario() {
  const { id } = useParams();

  return <h1>Perfil del Usuario: {id}</h1>;
}

// Multiples parametros
<Route path="/productos/:categoria/:productoId" element={<Producto />} />

function Producto() {
  const { categoria, productoId } = useParams();
  return <div>Categoria: {categoria}, Producto: {productoId}</div>;
}

Navegacion Programatica

import { useNavigate } from 'react-router-dom';

function FormularioLogin() {
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    // ... logica de login

    // Navegar al dashboard
    navigate('/dashboard');

    // Navegar hacia atras
    // navigate(-1);

    // Reemplazar en lugar de push
    // navigate('/dashboard', { replace: true });
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* ... */}
    </form>
  );
}

Rutas Anidadas

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Inicio />} />
        <Route path="productos" element={<Productos />}>
          <Route index element={<ListaProductos />} />
          <Route path=":id" element={<DetalleProducto />} />
        </Route>
      </Route>
    </Routes>
  );
}

// Layout con Outlet para rutas hijas
import { Outlet } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <header>Navegacion</header>
      <main>
        <Outlet /> {/* Aqui se renderizan las rutas hijas */}
      </main>
      <footer>Pie de pagina</footer>
    </div>
  );
}

Query Parameters

import { useSearchParams } from 'react-router-dom';

function BusquedaProductos() {
  const [searchParams, setSearchParams] = useSearchParams();

  const busqueda = searchParams.get('q') || '';
  const pagina = parseInt(searchParams.get('pagina')) || 1;

  const actualizarBusqueda = (termino) => {
    setSearchParams({ q: termino, pagina: '1' });
  };

  return (
    <div>
      <input
        value={busqueda}
        onChange={(e) => actualizarBusqueda(e.target.value)}
      />
      <p>Buscando: {busqueda}, Pagina: {pagina}</p>
    </div>
  );
}