14. React Router Dom

 Tutorial: React Router Dom – Enrutamiento Dinámico en React

📌 Introducción

En este tutorial aprenderás a utilizar React Router Dom, una librería esencial para manejar la navegación en aplicaciones React. Su funcionalidad principal es proporcionar componentes de navegación que permiten crear rutas dinámicas sin necesidad de recargar la página.

🚀 Paso 1: Instalación

Primero, abre la terminal en la raíz de tu proyecto React y ejecuta:

npm install react-router-dom

Si usas yarn:

yarn add react-router-dom

Esto instalará la librería necesaria para el enrutamiento.

📁 Paso 2: Estructura de carpetas

Vamos a organizar nuestro proyecto creando una carpeta para las páginas:

src/

├── components/

│   └── Welcome.js

├── pages/

│   ├── Contact.js

│   └── AboutMe.js

├── App.js

└── ...

🧩 Paso 3: Crear componentes de página

Contact.js

jsx

// src/pages/Contact.js

export default function Contact() {

    return (

        <div>

            <h4>Desde contact</h4>

            <p>Segundo</p>

        </div>

    );

}

AboutMe.js

jsx

// src/pages/AboutMe.js

export default function AboutMe() {

    return (

        <div>

            <h3>Desde sobre mí</h3>

        </div>

    );

}

🔧 Paso 4: Configurar el Router en App.js

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

import Contact from "./pages/Contact";

import AboutMe from "./pages/AboutMe";


function App() {

    return (

        <div className="App">

            <Router>

                <div>

                    <ul>

                        <li>

                            <Link to="/">Home</Link>

                        </li>

                        <li>

                            <Link to="/contact">Contact</Link>

                        </li>

                        <li>

                            <Link to="/about-me">About Me</Link>

                        </li>

                    </ul>

                </div>


                <Routes>

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

                    <Route path="/about-me" element={<AboutMe />} />

                </Routes>

            </Router>

        </div>

    );

}


export default App;

📝 Paso 5: Explicación de los componentes

  • <Router>: Envuelve toda la aplicación para habilitar el enrutamiento.

  • <Link>: Reemplaza a <a> para navegar sin recargar.

  • <Routes>: Contiene las definiciones de rutas.

  • <Route>: Define qué componente se renderiza en cada ruta.

🎯 Paso 6: Probar la navegación

  1. Inicia el servidor:

npm start

  1. Navega entre los enlaces Home, Contact y About Me.

  2. Observa cómo el contenido cambia sin recargar la página y la URL se actualiza.

✅ Resumen

Con React Router Dom hemos logrado:

  • Crear rutas dinámicas.

  • Navegar entre componentes sin recargar.

  • Mantener una URL amigable y navegable.

Ahora puedes extender este comportamiento añadiendo más páginas, rutas anidadas, parámetros en la URL y protección de rutas según sea necesario.

📚 Recursos útiles

¡Ya estás listo para construir aplicaciones React con navegación profesional! 

Comentarios

Publicar un comentario

Entradas más populares de este blog

9.3-Tutorial de Componentes React con Props -SSS

  Tutorial Sencillo de Componentes React con Props Ejemplo 1: Componente Saludo (simple) Componente Padre: App.js jsx function App () {    return (      < div >        < Saludo nombre = "Ana" edad ={ 25 } />        < Saludo nombre = "Carlos" edad ={ 30 } />      </ div >    ); } Componente Hijo: Saludo.js jsx function Saludo ( props ) {    return (      < div style ={{       border : '1px solid gray' ,       padding : '10px' ,       margin : '10px' ,       borderRadius : '5px'      }}>        < h3 > Hola { props . nombre }</ h3 >        < p > Tienes { props . edad } años ...
Leer más

9.6-Ciclo de Vida de un Componente React

  Ciclo de Vida de un Componente React Fases del Ciclo de Vida: 1. Montaje (Mounting) El componente se crea y se inserta en el DOM. 2. Actualización (Updating) El componente se re-renderiza debido a cambios en props o estado. 3. Desmontaje (Unmounting) El componente se elimina del DOM. Diagrama Completo del Ciclo de Vida En Componentes de Clase: javascript class MiComponente extends React . Component {    // 1. CONSTRUCTOR (montaje)    constructor ( props ) {      super ( props );      this . state = { contador : 0 };     console . log ( 'constructor' );    }    // 2. getDerivedStateFromProps (montaje/actualización)    static getDerivedStateFromProps ( props , state ) {     console . log ( 'getDerivedStateFromProps' );      return null ; // Retorna nuevo estado o null    }    // 3. RENDER (montaje/act...
Leer más

9-Componentes en React-estado

Concepto Básico Los componentes son los bloques fundamentales de una aplicación en React. Son piezas independientes y reutilizables de código que definen: Cómo debe verse una parte de la UI (estructura HTML) Cómo debe comportarse (lógica y funcionalidad) Analogía Imagina que estás construyendo una casa: Componente = Habitación (cocina, baño, dormitorio) Cada habitación tiene su propio diseño y función Puedes reutilizar el mismo diseño de dormitorio varias veces Juntas todas las habitaciones para formar la casa completa Tipos de Componentes 1. Componentes Funcionales (Recomendados actualmente) // Componente como función function Saludo ( props ) {    return < h1 > Hola , { props . nombre } !</ h1 > ; } ******************************************** // Con arrow function const Boton = ({ texto , onClick }) => {    return < button onClick = { onClick } > { texto } </ button > ; }; 2. Componentes de Clase (Legacy) javascript class Co...
Leer más