11-30. Routers

  ¿Cómo manejar Rutas en React con React Router DOM?

¿Quieres navegar entre páginas en tu aplicación de React como un profesional? 🌐💡

En este tutorial, te muestro paso a paso cómo configurar rutas usando React Router DOM (la herramienta esencial para enrutamiento en React). ¡Así de simple! ⬇️

🔹 Pasos clave:

1️⃣ Instala React Router DOM:

bash
npm install react-router-dom

2️⃣ Estructura tus carpetas:

  • src/routes/ → Archivo principal de rutas (Routes.jsx).

  • src/pages/ → Páginas completas (ej: Página1.jsx, Página2.jsx).

3️⃣ Configura las rutas:

jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Página1 from "../pages/Página1";
import Página2 from "../pages/Página2";

function MyRoutes() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Página1 />} />  {/* Ruta principal */}
        <Route path="/pagina2" element={<Página2 />} />  {/* Otra ruta */}
      </Routes>
    </BrowserRouter>
  );
}

4️⃣ Navega entre páginas con <Link>:

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

function Página1() {
  return (
    <div>
      <h1>Página 1</h1>
      <Link to="/pagina2">Ir a Página 2</Link>  {/* ¡Navegación sin recargar! */}
    </div>
  );
}

🎥 Demo visual:

  • Página 1 → Página 2 → Volver a Página 1. ¡Fluido y sin recargas! 🔄

👉 ¿Por qué usar React Router?

  • SPA (Single Page Application): Solo carga lo necesario.

  • URL amigables y navegación dinámica.

  • Ideal para proyectos con múltiples vistas.

📌 ¡Practica creando un menú de navegación! ¿Listo para dominar las rutas? 💻

🔗 ¿Quieres el código completo? ¡Déjame un comentario! 👇

#ReactJS #WebDevelopment #Frontend #Coding #ReactRouter #JavaScript

Comentarios

Publicar un comentario

Entradas más populares de este blog

6.5-4-Qué son las Props

Qué son las Props Son datos que se pasan de un  componente padre  a un  componente hijo . Las props son  inmutables  (el hijo no puede modificarlas directamente) y pueden ser de cualquier tipo: Strings, números, booleanos Arrays, objetos Funciones (para comunicación hijo → padre) Elementos React, componentes, etc. Permiten la comunicación entre componentes(Padre al hijo). Pueden ser de cualquier tipo: strings, números, arrays, objetos, funciones, etc. Ejemplo Básico jsx-cadena-entero // En el componente padre (App.js) function App ( ) { const userName = "Agustín Navarro" ; const age = 26 ; return ( < Saludar nombre = { userName } edad = { age } /> ) ; } // En el componente hijo (Saludar.js) function Saludar ( props ) { return ( < div > < h1 > Hola { props . nombre } </ h1 > < p > Edad: { props . edad } años </ p > </ div > ) ; } 🔹  ...
Leer más

6.8-23-pasando funciones a nuestro componente

Imagen
Pasando Funciones como Props en React Introducción Clara y Motivadora En React, los componentes no solo pueden recibir datos a través de props, ¡también pueden recibir funciones! Esto nos permite: ✅ Crear componentes interactivos (como botones que ejecutan acciones) ✅ Comunicar componentes hijos con padres ✅ Construir aplicaciones más dinámicas y reactivas 1. Pasando Funciones Básicas Ejemplo Simple: Botón con Alerta jsx-Funciones Básicas Copy Download // Componente Padre (App.js) function App ( ) { const saludar = ( ) => { alert ( "¡Hola desde el componente padre!" ) ; } ; return < BotonSaludar onClick = { saludar } /> ; } // Componente Hijo (BotonSaludar.js) function BotonSaludar ( props ) { return ( < button onClick = { props . onClick } > Saludar </ button > ) ; } 🔹  Key Points : La función se define en el padre y se pasa como prop ( onClick ) El hijo ejecuta la función cuando ocurre un evento ...
Leer más

6.12-0-3- Spread Operator

 Spread Operator en Props de React El  spread operator  ( ... ) es una herramienta poderosa en React que nos permite pasar múltiples  props  de manera más eficiente y limpia. ¡Veamos un ejemplo práctico! 🔹 ¿Cómo funciona? En lugar de pasar cada  prop  manualmente, podemos expandir un objeto directamente en las props del componente. Ejemplo sencillo: jsx-operator-objeto  // Definimos un objeto con las props const usuario = { nombre : "Ana" , edad : 25 , pais : "España" } ; // Pasamos todas las props de una vez usando ... function TarjetaUsuario ( props ) { return ( < div > < h2 > Nombre: { props . nombre } </ h2 > < p > Edad: { props . edad } </ p > < p > País: { props . pais } </ p > </ div > ) ; } // Uso del componente function App ( ) { return < TarjetaUsuario { ... usuario } /> ; } 🔹 Beneficios: ✅  Evita repetir ...
Leer más