El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

¿Qué es React Router?

React Router es una biblioteca estándar para el enrutamiento en aplicaciones React. Permite a los desarrolladores crear aplicaciones de una sola página (SPA) con navegación sin recargar la página completa. React Router gestiona la sincronización de la interfaz de usuario con la URL, proporcionando una experiencia de usuario fluida y rápida.

Conceptos Clave

Rutas (Routes): Definen la relación entre la URL y los componentes que se deben renderizar.
Enlaces (Links): Permiten la navegación entre diferentes rutas sin recargar la página.
Switch: Renderiza exclusivamente el primer <Route> que coincide con la URL actual.
Route Parameters: Permiten pasar parámetros a través de la URL.
Redirecciones (Redirects): Cambian la URL y redirigen a una ruta específica.

Instalación de React Router

Para comenzar a usar React Router, primero necesitas instalar la biblioteca en tu proyecto. Puedes hacerlo usando npm o yarn:

npm install react-router-dom

yarn add react-router-dom

Configuración Básica

Estructura del Proyecto

Asegúrate de que tu proyecto tenga la siguiente estructura básica:

my-app/
├── node_modules/
├── public/
├── src/
│   ├── components/
│   │   ├── Home.js
│   │   ├── About.js
│   │   └── Contact.js
│   ├── App.js
│   └── index.js
├── package.json
└── README.md

Configuración del Enrutador

En tu archivo index.js, envuelve tu aplicación con el componente BrowserRouter de react-router-dom:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Definiendo Rutas

En tu archivo App.js, define las rutas utilizando los componentes Route y Switch:

// src/App.js
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </div>
  );
}

export default App;

Creando Componentes

Crea los componentes Home, About y Contact en la carpeta components:

// src/components/Home.js
import React from 'react';

function Home() {
  return <h1>Home Page</h1>;
}

export default Home;

// src/components/About.js
import React from 'react';

function About() {
  return <h1>About Page</h1>;
}

export default About;

// src/components/Contact.js
import React from 'react';

function Contact() {
  return <h1>Contact Page</h1>;
}

export default Contact;

Navegación con Links

Para permitir la navegación entre las diferentes rutas, utiliza el componente Link de react-router-dom:

// src/App.js
import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </div>
  );
}

export default App;

Ejercicio Práctico

Ejercicio

Crea un nuevo componente llamado Services que muestre un mensaje "Services Page".
Añade una nueva ruta /services en App.js que renderice el componente Services.
Añade un enlace a la página de servicios en la barra de navegación.

Solución

// src/components/Services.js
import React from 'react';

function Services() {
  return <h1>Services Page</h1>;
}

export default Services;

// src/App.js
import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Services from './components/Services';

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
          <li><Link to="/services">Services</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/services" component={Services} />
      </Switch>
    </div>
  );
}

export default App;

Conclusión

En esta lección, hemos cubierto los conceptos básicos de React Router, incluyendo la instalación, configuración y creación de rutas. También hemos aprendido a utilizar el componente Link para la navegación. En la próxima lección, profundizaremos en la configuración avanzada de React Router, incluyendo rutas anidadas y navegación programática.

Introducción a React Router

¿Qué es React Router?

Conceptos Clave

Instalación de React Router

Configuración Básica

Estructura del Proyecto

Configuración del Enrutador

Definiendo Rutas

Creando Componentes

Navegación con Links

Ejercicio Práctico

Ejercicio

Solución

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa