Navegación y enrutamiento

React
React
Actualizado: 14/02/2025

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

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:

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

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.

Completa React y certifícate

Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración