Aprender React Navegación y enrutamiento

En React 19, la navegación y el enrutamiento son componentes esenciales para construir aplicaciones web dinámicas y de múltiples páginas. La biblioteca react-router-dom es la herramienta más utilizada para este propósito. A continuación, exploraremos cómo configurar y utilizar la navegación y el enrutamiento en React 19.

Instalación de react-router-dom

Para comenzar, primero necesitamos instalar la biblioteca react-router-dom. Esto se puede hacer utilizando npm o yarn:

npm install react-router-dom

o

yarn add react-router-dom

Configuración básica

Una vez instalada la biblioteca, podemos configurar nuestro enrutador. En el archivo principal de nuestra aplicación (por ejemplo, index.js), importamos los componentes necesarios y envolvemos nuestra aplicación con BrowserRouter:

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')
);

Definición de rutas

En el componente principal de la aplicación (App.js), podemos definir nuestras rutas utilizando los componentes Routes y Route:

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

export default App;

Navegación entre rutas

Para navegar entre rutas, podemos utilizar el componente Link o la función useNavigate. El componente Link reemplaza a los enlaces HTML tradicionales:

import React from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

export default Navbar;

Parámetros de ruta

Podemos definir rutas con parámetros utilizando :. Para acceder a estos parámetros, usamos el hook useParams:

import React from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
  let { userId } = useParams();
  return <div>User ID: {userId}</div>;
}

Y en la configuración de rutas:

<Routes>
  <Route path="/user/:userId" element={<UserProfile />} />
</Routes>

Redirecciones

Para redirigir a los usuarios a otra ruta, utilizamos el componente Navigate:

import React from 'react';
import { Navigate } from 'react-router-dom';

function ProtectedRoute({ isAuthenticated }) {
  return isAuthenticated ? <Dashboard /> : <Navigate to="/login" />;
}

Anidación de rutas

Podemos anidar rutas para crear una estructura más compleja:

import React from 'react';
import { Routes, Route, Outlet } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Route>
    </Routes>
  );
}

function Layout() {
  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  );
}

export default App;

Esta configuración permite que Navbar se renderice en todas las rutas definidas dentro del componente Layout.