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.