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/*'

  1. };

  2. Validación de parámetros

  3. jsx

function UserProfile() {

  const { id } = useParams();

  

  if (!isValidUserId(id)) {

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

  }

  

  return <UserContent id={id} />;

  1. }

  2. Scroll restoration

  3. jsx

import { useEffect } from 'react';

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


function ScrollToTop() {

  const { pathname } = useLocation();

  

  useEffect(() => {

    window.scrollTo(0, 0);

  }, [pathname]);

  

  return null;

  1. }

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


Comentarios

Publicar un comentario

Entradas más populares de este blog

11. Creando un proyecto react con create-react-app

    ¡Vamos a crearnos ahora nuestros proyectos de realidad! Vamos a ver dos formas. La primera va a ser con el clásico  Create React App , que, por cierto, tiene una gran ventaja: encontrarás muchísimos proyectos inicializados con esta herramienta. Es decir, podrás acceder a bastantes códigos fuente que usan este tipo de creación. Esta es la forma que también  React nos recomienda  para arrancar. Podemos verlo en su documentación oficial, donde se explica paso a paso cómo crear un proyecto con esta herramienta. Paso a paso: Creamos una carpeta raíz  para almacenar todos nuestros proyectos. Yo la llamé "React intensivo". Abrimos  Visual Studio Code  (nueva ventana) y arrastramos la carpeta dentro. Así usamos la interfaz gráfica, aunque también se puede hacer directamente por consola. Una vez dentro de la carpeta, abrimos una  nueva terminal  en VS Code. Según la documentación de React, el comando es: bash npx create-react-app < nombre-...
Leer más

29. useEffect

  Tutorial: 29. useEffect en React Introducción a useEffect useEffect es uno de los Hooks más importantes en React que nos permite ejecutar efectos secundarios en nuestros componentes funcionales. Los efectos secundarios son operaciones que pueden incluir peticiones a APIs, suscripciones, manipulación del DOM, etc. 1. Sintaxis Básica La sintaxis básica de useEffect es: javascript useEffect (() => {    // Código a ejecutar }, []) // Array de dependencias Ejemplo visual de la sintaxis: text useEffect(()=>{},[]) 2. Ejemplo Práctico: Sistema de Likes Vamos a construir un componente de likes para entender cómo funciona useEffect : javascript import { useState , useEffect } from "react" ; export function Prueba () {    const [ likes , setLikes ] = useState ( 0 );       const darLike = () => {      setLikes ( likes + 1 );    };       // useEffect ejecutando darLike un...
Leer más

38. 4 Routers

  Tutorial 38.4: Implementando Router en nuestra App de Películas Introducción a React Router Ahora que tenemos nuestra aplicación mostrando películas, necesitamos implementar navegación entre diferentes vistas. Vamos a crear rutas para: Ver la lista de películas (página principal) Ver el detalle de cada película Otras vistas futuras (búsqueda, favoritos, etc.) Paso 1: Estructura de carpetas Primero, vamos a organizar nuestro proyecto con una estructura más profesional: text src/ ├── assets/ ├── components/ │   ├── ContextMovieCard.jsx │   └── MovieCard.jsx ├── data/ ├── pages/ │   └── LandingPage.jsx ├── routers/ │   └── routes.jsx ├── App.css ├── App.jsx ├── index.css └── main.jsx Paso 2: Instalar React Router DOM Abrimos una terminal en nuestro proyecto 1-peliculas y ejecutamos: bash cd 1 -peliculas yarn add react-router-dom O con npm: bash npm install react-router-dom Paso 3: Crear componentes básicos MovieCard.jsx (Componente individual de película) j...
Leer más