Módulo 5: Enrutamiento y Navegación

5.1 React Router

Configuración de rutas:

React Router es una biblioteca que permite gestionar el enrutamiento y la navegación en aplicaciones React. Permite definir rutas para diferentes componentes y renderizar el componente adecuado según la URL actual.

Instalación:

Para instalar React Router, utiliza el siguiente comando:

npm install react-router-dom
    

Configuración básica:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Inicio</Link>
          </li>
          <li>
            <Link to="/acerca">Acerca de</Link>
          </li>
          <li>
            <Link to="/contacto">Contacto</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Inicio} />
      <Route path="/acerca" component={Acerca} />
      <Route path="/contacto" component={Contacto} />
    </div>
  </Router>
);

const Inicio = () => <h2>Página de inicio</h2>;
const Acerca = () => <h2>Acerca de nosotros</h2>;
const Contacto = () => <h2>Página de contacto</h2>;

export default App;
    

Navegación entre componentes:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Menu = () => (
  <nav>
    <ul>
      <li>
        <Link to="/">Inicio</Link>
      </li>
      <li>
        <Link to="/acerca">Acerca de</Link>
      </li>
      <li>
        <Link to="/contacto">Contacto</Link>
      </li>
    </ul>
  </nav>
);

export default Menu;
    

Uso de parámetros en las rutas:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Inicio</Link>
          </li>
          <li>
            <Link to="/usuario/123">Usuario 123</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Inicio} />
      <Route path="/usuario/:id" component={Usuario} />
    </div>
  </Router>
);

const Inicio = () => <h2>Página de inicio</h2>;

const Usuario = ({ match }) => (
  <h2>Página de usuario: {match.params.id}</h2>
);

export default App;
    

React Router facilita la navegación y el enrutamiento en aplicaciones React, permitiendo a los usuarios cambiar entre diferentes vistas sin tener que recargar la página completa.

En los siguientes módulos, exploraremos la gestión de estado más avanzada y la integración de APIs externas en aplicaciones React.