Routes

El routing en React se utiliza para manejar la navegación dentro de aplicaciones de una sola página (SPA, Single Page Applications). En estas aplicaciones, en lugar de recargar toda la página para navegar, se actualizan componentes específicos, lo que hace que la experiencia sea más rápida y fluida.

Para implementar rutas en React, usamos bibliotecas como React Router, que ofrece un sistema de rutas dinámico y configurable.

---

Instalación de React Router

Primero, instala React Router en tu proyecto:

npm install react-router-dom

---

Conceptos básicos de react-router-dom

1. BrowserRouter o HashRouter
   • Proporciona el contexto para las rutas.
   • Usamos BrowserRouter para URL normales (ej.: /ruta).
   • Usamos HashRouter para URLs con hash (ej.: /#/ruta).
2. Routes y Route
   • Routes: Encierra todas las rutas de tu aplicación.
   • Route: Define una ruta específica.
3. Link y NavLink
   • Link: Permite navegar entre rutas sin recargar la página.
   • NavLink: Similar a Link, pero con estilos adicionales dependiendo de si la ruta está activa.
4. useNavigate
   • Permite redirigir al usuario mediante código.
5. Parámetros dinámicos
   • Rutas que aceptan parámetros variables, como /productos/:id.

---

Ejemplo 1: Configuración básica de rutas

Código:

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

function Home() {
  return <h1>Página de Inicio</h1>;
}

function About() {
  return <h1>Acerca de Nosotros</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Inicio</Link> | <Link to="/about">Acerca de</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Explicación:

• El componente BrowserRouter envuelve toda la aplicación.
• Los enlaces (<Link>) permiten navegar entre rutas.
• Las rutas (<Route>) definen qué componente mostrar para cada URL.

---

Ejemplo 2: Parámetros dinámicos

Código:

import React from "react";
import { BrowserRouter, Routes, Route, Link, useParams } from "react-router-dom";

function Product() {
  const { id } = useParams();
  return <h1>Detalles del producto con ID: {id}</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/product/1">Producto 1</Link> | <Link to="/product/2">Producto 2</Link>
      </nav>
      <Routes>
        <Route path="/product/:id" element={<Product />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Explicación:

• La ruta "/product/:id" acepta un parámetro dinámico (:id).
• useParams extrae el valor del parámetro dinámico, como 1 o 2.

---

Ejemplo 3: Navegación programática con useNavigate

Código:

import React from "react";
import { BrowserRouter, Routes, Route, useNavigate } from "react-router-dom";

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

  const goToAbout = () => {
    navigate("/about");
  };

  return (
    <div>
      <h1>Página de Inicio</h1>
      <button onClick={goToAbout}>Ir a Acerca de</button>
    </div>
  );
}

function About() {
  return <h1>Acerca de Nosotros</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Explicación:

• useNavigate permite redirigir al usuario mediante código.
• En este caso, se redirige al hacer clic en el botón.

---

Ejemplo 4: Rutas protegidas

Código:

import React from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

function ProtectedRoute({ isAuthenticated, children }) {
  return isAuthenticated ? children : <Navigate to="/" />;
}

function Home() {
  return <h1>Página de Inicio</h1>;
}

function Dashboard() {
  return <h1>Panel de Usuario</h1>;
}

function App() {
  const isAuthenticated = false; // Cambia a true para simular autenticación

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route
          path="/dashboard"
          element={
            <ProtectedRoute isAuthenticated={isAuthenticated}>
              <Dashboard />
            </ProtectedRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Explicación:

• ProtectedRoute verifica si el usuario está autenticado.
• Si no lo está, redirige a la página de inicio (<Navigate to="/" />).

---

Ejemplo 5: Rutas anidadas

Código:

import React from "react";
import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom";

function Dashboard() {
  return (
    <div>
      <h1>Panel</h1>
      <nav>
        <Link to="profile">Perfil</Link> | <Link to="settings">Configuración</Link>
      </nav>
      <Outlet />
    </div>
  );
}

function Profile() {
  return <h1>Perfil del Usuario</h1>;
}

function Settings() {
  return <h1>Configuración</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Explicación:

• Se utilizan rutas anidadas dentro de /dashboard.
• Outlet es un marcador donde se renderizan las rutas hijas.

---

Consejos para usar rutas en React:

1. Organiza tus rutas: Usa archivos separados para rutas complejas.
2. Administra rutas protegidas: Combina con contextos o Redux para manejar autenticación.
3. Usa lazy y Suspense: Para cargar componentes bajo demanda.

   const About = React.lazy(() => import('./About'));