Instalar React Router Dom 6 paso a paso

Curso de React.js: Navegación con React Router

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:18

Instalar React Router Dom 6 paso a paso

Curso de React.js: Navegación con React Router

Clase 4 de 30

Clase 4 / 30

Recursos

Instalar React Router Dom 6 en un proyecto creado con Create React App es el primer paso para añadir navegación entre páginas a tu aplicación de React. Aquí aprendes el proceso completo, por qué fijar la versión 6 y cómo evitar conflictos de compatibilidad con React 18.

¿Por qué instalar React Router Dom 6 y no otra versión?

El ecosistema de routers en React ha pasado por muchos cambios: versiones oficiales que se descontinuaron, forks alternativos, la fusión con Reach Router y, hoy, un repositorio mantenido bajo la cuenta de Remix que agrupa React Router, React Router Dom y React Router Native.

La recomendación es empezar con la versión 6 aunque más adelante migres a otra. Todos los routers comparten una estructura similar, así que dominar los fundamentos en la 6 te facilita saltar a versiones nuevas o más antiguas sin perder el hilo.

¿Qué es React Router Dom? Es la librería oficial para manejar rutas y navegación en aplicaciones web hechas con React. Se instala desde npm con el nombre react-router-dom y pertenece al repositorio de Remix.

¿Cómo crear el proyecto base con Create React App?

Antes de instalar el router necesitas un proyecto limpio de React [01:50]. Para evitar problemas con versiones globales desactualizadas, usa npx y fija la versión de Create React App.

Ejecuta en tu terminal:

bash npx create-react-app@5 ./

El punto y la barra le indican que use la carpeta actual. Si prefieres un nombre específico, reemplaza ./ por algo como reactrouterejemplo. La ventaja de usar npx es que descarga el paquete, lo ejecuta y luego lo elimina, así siempre trabajas con la versión que pediste sin conflictos de dependencias.

¿Qué hago si aparecen errores durante la instalación?

Los errores más comunes vienen de carpetas previas como la de Visual Studio Code o de versiones cacheadas de Create React App. La solución es directa:

Lee el mensaje completo que devuelve npm.
Copia el error y búscalo en Google o Stack Overflow.
Limpia carpetas conflictivas si el log las menciona.
Si nada funciona, deja una pregunta marcada como tal en los comentarios del curso.

No entres en pánico. La mayoría de errores se resuelven siguiendo las instrucciones del propio terminal.

¿Cómo instalar React Router Dom 6 con npm?

Una vez dentro de la carpeta del proyecto, instala la dependencia con npm fijando el número de versión [09:30]:

bash npm install --save react-router-dom@6

La arroba seguida del número le pide a npm cualquier versión que empiece por 6, sea 6.3, 6.4 o la última minor disponible. Mientras el primer dígito siga siendo 6, todo lo que aprendas aplica sin cambios. Si quieres ser aún más estricto, puedes especificar react-router-dom@6.3.0.

¿Por qué fijar la versión con @6? Porque las APIs cambian entre major versions. Si npm instala la versión 7 o superior, componentes y hooks podrían comportarse distinto y romper tu código.

¿Va en dependencies o en devDependencies?

React Router Dom debe quedar en dependencies, no en devDependencies. La razón es simple: la librería se ejecuta también en producción, igual que React. Si la pones en devDependencies, tu app rota al desplegarla. Revisa tu package.json y confirma que aparezca en el bloque correcto.

¿React Router Dom 6 es compatible con React 18?

Sí, y este es uno de los puntos críticos. Create React App actual instala React 18, y React Router Dom 6 fue diseñado para soportarlo. Las versiones 5 o anteriores del router no son compatibles con React 18 por cambios en la forma de crear el root y el árbol de renderizado.

La regla práctica:

React 18 + React Router Dom 6: compatibles.
React 17 o menor + React Router Dom 5 o menor: compatibles.
Mezclar React 18 con React Router Dom 5: probablemente falle.

Si tu proyecto usa una versión vieja del router, valora hacer el upgrade a la 6 o mantener React 17 hasta que migres.

¿Cómo verifico que todo quedó bien instalado?

Levanta el servidor de desarrollo:

bash npm start

El servidor abre en localhost:3000 con la pantalla por defecto de Create React App. Abre tu package.json y confirma que react-router-dom aparece dentro de dependencies con la versión 6.

Si durante la instalación npm reportó vulnerabilidades, puedes correr npm audit o npm audit fix --force para revisar el package-lock.json y actualizar lo que sea necesario. No es bloqueante para avanzar, pero es buena higiene del proyecto.

Con el proyecto funcionando y la dependencia en su lugar, ya tienes la base lista para empezar a integrar los componentes del router. El siguiente paso es entender los tipos de routers que ofrece la librería: esos providers que cambian según el tipo de renderizado y navegación que quieras dar a tu aplicación.

¿Tuviste algún error distinto durante la instalación? Cuéntalo en los comentarios.

Juan Diego Mejia Maestre

Hace 10 meses•editado

📝 Notas del Curso: Instalación de React Router DOM 6

🚀 Introducción

¿Qué es? React Router DOM es una herramienta esencial para gestionar la navegación y estructurar la aplicación React en múltiples rutas y vistas.

Recomendación: Se recomienda instalar la versión 6 por su API robusta y estandarizada, que proporciona una base sólida para futuros trabajos o migraciones.

🛠️ Paso 1: Crear un Nuevo Proyecto con Create React App

Para empezar, necesitamos un proyecto base de React.

Abre tu terminal.

Utiliza uno de los siguientes comandos:

Para crear un nuevo directorio de proyecto:

npx create-react-app nombre-del-proyecto

Si ya estás en un repositorio y quieres crear el proyecto en la carpeta actual:

npx create-react-app ./

Este comando instalará las dependencias básicas y configurará la estructura del proyecto.

💡 Nota: Si encuentras errores, sigue las instrucciones del terminal o busca soluciones en foros.

📦 Paso 2: Instalar React Router DOM 6

Una vez que el proyecto base está listo, instalamos el router.

Asegúrate de estar en el directorio raíz de tu proyecto (usa cd nombre-del-proyecto si es necesario).

Ejecuta el siguiente comando para instalar la versión 6 específicamente:

npm install react-router-dom@6

🛡️ Paso 3: Manejo de Posibles Problemas de Instalación (Opcional)

Si NPM indica vulnerabilidades:

Utiliza npm audit para revisar las vulnerabilidades.

Utiliza npm audit fix --force para corregir posibles inconsistencias y asegurar que se usen versiones seguras.

▶️ Paso 4: Iniciar el Servidor de Desarrollo

Verifica que todo funcione iniciando la aplicación.

Ejecuta el comando:

npm start

Esto abrirá la aplicación en tu navegador predeterminado (normalmente en localhost:3000).

✅ Consideración Clave: Compatibilidad entre Versiones

Es fundamental verificar que todas las dependencias (como React y React Router DOM) sean compatibles entre sí para evitar problemas.

Ejemplo: React Router DOM 5 podría no ser compatible con React 18.

💡 Conclusión

Con estos pasos, tienes React Router DOM 6 instalado y listo para comenzar a trabajar con rutas y componentes, lo que te permitirá estructurar mejor tu aplicación React. ¡Anímate a explorar y experimentar!

Comentarios (23)23 comentarios

Fabio Erik Sosa Morinigo

Hace 4 años

Gilbert Ardila

David Prado

Andrés Esteban Rodríguez Jiménez

Mariano Gastón Paduani

Rubén Ernesto Aragón Gil

David Condori Quispe

Augusto Gonzalez

Juan Castro

Profesor

Seba Cardoso

Harold Zurita Simon

Hace 3 años

Max Andy Diaz Neyra

Lurgia Yupa Arias

JOSE RANGEL

Juan Camilo Lentino Villalba

Jose Luis Bedoya

Roger David Alba Ortega

Gualberto Montiel

Marco Palacios Orihuela

Paola Marcela Arguelles Salazar

Platzi

Daniel Morales

Hace 2 años

Enna Velasquez Botache

Charles Castillo Rosas

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalar React Router Dom 6 paso a paso

Browser Router vs Hash Router en GitHub Pages

Primeras rutas con React Router Dom 6

Link y NavLink para navegación en React

Rutas dinámicas con React Router DOM y useParams

useNavigate para navegar con JavaScript

Outlet y rutas anidadas en React Router

Fake authentication con React Router DOM 6

Rutas privadas con fake auth en React

Rutas privadas y públicas en React

Rutas protegidas con Navigate en React

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Redirect al login con useLocation en React

Rutas dinámicas con roles de usuario

React Router en TODO Machine

Cómo migrar React portals a rutas reales

Estructura de carpetas con React Router Dom 6

Botón de editar todos con React y SVG

Generación de IDs únicos para gestionar tareas en React

Migrar modales a rutas con useNavigate

Cómo funciona editTodo con useParams

Texto por defecto en textarea con useLocation

Implementación de React Router en Proyectos Legacy

Próximos pasos

Sincronizar el buscador con la URL

Migrando a React Router Dom 5 en proyectos reales

Migra Platzi Movies de JS a React

Clonar React Router desde cero

Navegación Avanzada con React Router DOM 6

Instalar React Router Dom 6 paso a paso