30. Routers

Routers en React

📌 Introducción a las rutas en React

En React, las rutas nos permiten navegar entre diferentes páginas o vistas dentro de una aplicación. Es similar a navegar de un lugar a otro en la vida real: vamos del punto A al punto B a través de diferentes caminos o rutas.

🗂️ Estructura del proyecto

Para trabajar con rutas, necesitamos organizar nuestro proyecto de la siguiente manera:

text

src/

├── components/      # Componentes reutilizables

├── pages/           # Páginas completas

├── routers/         # Configuración de rutas

├── App.jsx

└── main.jsx

🚀 Paso 1: Crear la estructura de carpetas

1. Carpeta pages/: Contiene las vistas completas de nuestra aplicación

2. Carpeta routers/: Contiene la configuración de las rutas

📄 Paso 2: Crear las páginas

Pagina1.jsx:

jsx

export function Pagina1() {

    return <h1>Pagina 1</h1>;

}

Pagina2.jsx:

jsx

export function Pagina2() {

    return <h1>Pagina 2</h1>;

}

📦 Paso 3: Instalar React Router DOM

En la terminal, ejecuta:

bash

npm install react-router-dom

Verifica que en package.json aparezca en dependencias:

json

"dependencies": {

  "react-router-dom": "^6.0.0"

}

🔧 Paso 4: Configurar las rutas

routes.jsx:

jsx

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

import { Pagina1 } from "../pages/Pagina1";

import { Pagina2 } from "../pages/Pagina2";

export function MyRoutes() {

    return (

        <BrowserRouter>

            <Routes>

                <Route path="/" element={<Pagina1 />} />

                <Route path="/pagina2" element={<Pagina2 />} />

            </Routes>

        </BrowserRouter>

    );

}

🔗 Paso 5: Navegar entre páginas

Para navegar entre páginas, usamos el componente Link:

Pagina1.jsx actualizado:

jsx

import { Link } from "react-router-dom";

export function Pagina1() {

    return (

        <div>

            <h1>Pagina 1</h1>

            <Link to="/pagina2">Ir a pagina 2</Link>

        </div>

    );

}

Pagina2.jsx actualizado:

jsx

import { Link } from "react-router-dom";

export function Pagina2() {

    return (

        <div>

            <h1>Hola soy pagina 2</h1>

            <Link to="/">Ir a pagina 1</Link>

        </div>

    );

}

🎯 Paso 6: Integrar las rutas en App.jsx

App.jsx:

jsx

import { MyRoutes } from "./routers/routes";

function App() {

    return <MyRoutes />;

}

export default App;

📝 Paso 7: Entender cómo funcionan las rutas

1. BrowserRouter: Es el contenedor principal que habilita el enrutamiento

2. Routes: Contiene todas las rutas de la aplicación

3. Route: Define una ruta específica con:

• path: La URL de la ruta

• element: El componente a renderizar

4. Link: Reemplaza al elemento <a> para navegar sin recargar la página

🔍 Explicación de las rutas configuradas

• Ruta principal (/): Muestra Pagina1

• Ruta secundaria (/pagina2): Muestra Pagina2

💡 Consejos importantes

1. Siempre en minúsculas: Los paths deben estar en minúsculas

2. Importaciones correctas: Asegúrate de que las rutas de importación sean correctas

3. Estructura clara: Mantén las páginas en pages/ y la configuración en routers/

4. Ruta por defecto: La ruta / suele ser la página principal

🎨 Visualización en el navegador

• Al entrar a http://localhost:5173/ verás "Pagina 1"

• Al hacer clic en "Ir a pagina 2", la URL cambiará a http://localhost:5173/pagina2

• Verás "Hola soy pagina 2" con un enlace para volver

🚫 Errores comunes a evitar

1. Olvidar instalar react-router-dom

2. No envolver las rutas con <BrowserRouter>

3. Usar <a> en lugar de <Link> (recargaría la página)

4. Errores en las rutas de importación

✅ Resumen

Las rutas en React nos permiten crear aplicaciones de una sola página (SPA) con múltiples vistas. Con react-router-dom podemos definir rutas, navegar entre ellas sin recargar la página y mantener una URL limpia y navegable.

Este sistema es fundamental para cualquier aplicación React que requiera múltiples páginas o vistas, manteniendo la experiencia de usuario fluida y profesiona

*************************************************************************

Routers en React

Los routers en React son librerías que permiten manejar la navegación en aplicaciones de una sola página (SPA), cambiando la vista sin recargar la página completa.

Librerías principales

1. React Router (la más popular)

bash

npm install react-router-dom

2. TanStack Router (anteriormente React Location)

bash

npm install @tanstack/react-router

React Router (v6)

Configuración básica

jsx

// App.jsx

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

import Home from './Home';

import About from './About';

import Contact from './Contact';

function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

        <Route path="/contact" element={<Contact />} />

      </Routes>

    </BrowserRouter>

  );

}

Navegación entre rutas

jsx

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

function Navbar() {

  const navigate = useNavigate();

  

  return (

    <nav>

      {/* Navegación declarativa */}

      <Link to="/">Inicio</Link>

      <Link to="/about">Acerca de</Link>

      

      {/* Navegación programática */}

      <button onClick={() => navigate('/contact')}>

        Contacto

      </button>

      

      {/* Navegación con parámetros */}

      <Link to="/users/123">Usuario 123</Link>

    </nav>

  );

}

Rutas dinámicas y parámetros

jsx

// App.jsx

<Routes>

  <Route path="/users/:id" element={<UserProfile />} />

  <Route path="/products/:category/:id" element={<ProductDetail />} />

</Routes>

// UserProfile.jsx

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

function UserProfile() {

  const { id } = useParams(); // Obtiene el parámetro :id

  return <h1>Perfil del usuario {id}</h1>;

}

Rutas anidadas (Layouts)

jsx

// App.jsx

<Routes>

  <Route path="/" element={<Layout />}>

    <Route index element={<Home />} />

    <Route path="dashboard" element={<Dashboard />}>

      <Route path="stats" element={<Stats />} />

      <Route path="settings" element={<Settings />} />

    </Route>

  </Route>

</Routes>

// Layout.jsx

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

function Layout() {

  return (

    <div>

      <header>Mi Aplicación</header>

      <main>

        {/* Aquí se renderizan las rutas hijas */}

        <Outlet />

      </main>

      <footer>Pie de página</footer>

    </div>

  );

}

Hook de navegación avanzado

jsx

import { useLocation, useSearchParams, useMatch } from 'react-router-dom';

function ProductPage() {

  const location = useLocation(); // Información de la ruta actual

  const [searchParams, setSearchParams] = useSearchParams(); // Query params

  const match = useMatch('/products/:id'); // Pattern matching

  

  // Ejemplo: Obtener parámetros de query

  const sortBy = searchParams.get('sort');

  

  // Ejemplo: Actualizar query params

  const handleSort = (value) => {

    setSearchParams({ sort: value });

  };

  

  return (

    <div>

      <p>Ruta actual: {location.pathname}</p>

      <button onClick={() => handleSort('price')}>

        Ordenar por precio

      </button>

    </div>

  );

}

Características avanzadas

1. Lazy Loading de rutas

jsx

import { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./HeavyComponent'));

<Routes>

  <Route path="/heavy" element={

    <Suspense fallback={<div>Cargando...</div>}>

      <LazyComponent />

    </Suspense>

  } />

</Routes>

2. Protección de rutas

jsx

// PrivateRoute.jsx

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

function PrivateRoute({ children, isAuthenticated }) {

  return isAuthenticated ? children : <Navigate to="/login" />;

}

// Uso

<Route path="/dashboard" element={

  <PrivateRoute isAuthenticated={user}>

    <Dashboard />

  </PrivateRoute>

} />

3. Manejo de errores

jsx

<Routes>

  <Route path="/" element={<Home />} />

  <Route path="*" element={<NotFound />} />

  <Route path="/error" element={<ErrorBoundary />} />

</Routes>

Mejores prácticas

1. Organización de rutas

2. jsx

// routes/index.js

export const ROUTES = {

  HOME: '/',

  ABOUT: '/about',

  CONTACT: '/contact/:id?',

  DASHBOARD: '/dashboard/*'

3. };

4. Validación de parámetros

5. jsx

function UserProfile() {

  const { id } = useParams();

  

  if (!isValidUserId(id)) {

    return <Navigate to="/not-found" />;

  }

  

  return <UserContent id={id} />;

6. }

7. Scroll restoration

8. jsx

import { useEffect } from 'react';

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

function ScrollToTop() {

  const { pathname } = useLocation();

  

  useEffect(() => {

    window.scrollTo(0, 0);

  }, [pathname]);

  

  return null;

9. }

Comparación React Router vs TanStack Router

Característica	React Router	TanStack Router
Tamaño	~18KB	~14KB
Tipado	TypeScript incluido	TypeScript-first
Loaders	Sí (v6.4+)	Sí
DevTools	No	Sí
Curva aprendizaje	Media	Media-Alta
Popularidad	Muy alta	Creciente

Ejemplo completo

jsx

// App.jsx

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

import Layout from './Layout';

import Home from './Home';

import About from './About';

import Users from './Users';

import UserDetail from './UserDetail';

import NotFound from './NotFound';

function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route element={<Layout />}>

          <Route index element={<Home />} />

          <Route path="about" element={<About />} />

          <Route path="users">

            <Route index element={<Users />} />

            <Route path=":userId" element={<UserDetail />} />

          </Route>

          <Route path="*" element={<NotFound />} />

        </Route>

      </Routes>

    </BrowserRouter>

  );

}

Los routers son esenciales para crear SPAs profesionales en React, proporcionando una experiencia de usuario fluida mientras mantienen la estructura y organización del código. React Router sigue siendo la opción más popular, pero TanStack Router ofrece características modernas interesantes para proyectos complejos