Fundamentos de navegación en la web

1

Navegación Web con React Router: Fundamentos y Prácticas Avanzadas

2

Server-side Rendering vs Single Page Applications: Ventajas y Desventajas

3

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

4

Instalación de React Router DOM 6 en un proyecto React

5

Uso de Hash Router en Aplicaciones Web con React Router DOM

6

Creación de Rutas Dinámicas con React Router DOM 6

7

Navegación en React Router: Uso de Link y NavLink

8

Rutas dinámicas con React Router DOM y useParams

9

Uso de useNavigate en React Router DOM para navegación dinámica

10

Uso de Outlet y Nested Routes en React Router DOM 6

Fake authentication con React Router DOM 6

11

Autenticación y Autorización en Apps con React Router y Hooks

12

Control de Acceso en Menú con Autenticación React

13

Protección de Rutas con React Router y Hooks

14

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

15

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

16

Mejorando la Redirección Post-Login en Aplicaciones Web

17

Roles y Permisos Avanzados en React Router v6

React Router en TODO Machine

18

Migración de Todo Machine a React Router 6

19

Organización de carpetas y rutas en React con React Router DOM 6

20

Maquetación de Botón Editar en Lista de Tareas con React

21

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

22

Migración de modales a rutas en React: implementación práctica

23

Editar ToDos en React con Custom Hook y URL Parameters

24

Mejora de la Experiencia del Usuario al Editar To Do's en React

25

Implementación de React Router en Proyectos Legacy

Próximos pasos

26

Filtrado de Búsquedas en URL con React Router

27

Migración de React Router: de la versión 6 a la 5 en proyectos empresariales

28

Clonación de Platzi Movies usando React y React Router

29

Clonación de React Router en Componentes React

30

Navegación Avanzada con React Router DOM 6

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Instalación de React Router DOM 6 en un proyecto React

4/30
Recursos

¿Cómo instalar React Router DOM 6 en un proyecto de React?

Instalar React Router DOM 6 en tu proyecto de React puede parecer una tarea desafiante al inicio, pero con las instrucciones adecuadas, el proceso se vuelve mucho más manejable. React Router DOM es una herramienta esencial para gestionar la navegación de un proyecto en React, permitiendo estructurar tu aplicación en múltiples rutas y vistas. A continuación, exploraremos cómo instalar y configurar React Router DOM 6 en un proyecto creado con Create React App, asegurando la correcta compatibilidad entre versiones.

¿Por qué instalar React Router DOM 6?

Instalar la versión 6 de React Router DOM es altamente recomendado, incluso si existen versiones más actualizadas o si estás trabajando con un equipo que utiliza otra versión. React Router DOM 6 ofrece una API robusta y estandarizada que es útil para entender los fundamentos de los routers en React. Además, más adelante, podrás realizar una migración a una versión diferente o a otro router si así lo deseas, pero teniendo una base sólida en la versión 6.

¿Cómo crear un nuevo proyecto con Create React App?

El primer paso es crear un nuevo proyecto con Create React App, una herramienta que facilita la creación de proyectos en React al entregar una estructura básica y configuraciones predeterminadas.

  1. Abre la terminal de tu preferencia.
  2. Utiliza el siguiente comando para crear el proyecto:
    npx create-react-app nombre-del-proyecto
    
    Si ya tienes un repositorio, puedes usar:
    npx create-react-app ./ 
    
    Esto instalará las dependencias necesarias y organizará tu proyecto en una carpeta específica. Si encuentras errores al ejecutar este comando, sigue las instrucciones que proporciona el terminal o busca soluciones en foros como Stack Overflow.

¿Cómo instalar React Router DOM 6?

Una vez creado tu proyecto, es momento de añadir React Router DOM 6:

  1. Asegúrate de estar en el directorio raíz de tu proyecto.
  2. Ejecuta el siguiente comando:
    npm install react-router-dom@6
    
    Aquí estamos asegurando la instalación de la versión 6, lo que permitirá usar todas sus funcionalidades sin problemas de compatibilidad.

¿Cómo manejar posibles problemas durante la instalación?

Durante la instalación, NPM puede indicarte vulnerabilidades en las dependencias. Puedes utilizar los comandos npm audit o npm audit fix --force para corregir posibles inconsistencias y asegurarte de que tu proyecto esté utilizando versiones seguras.

¿Cómo iniciar tu servidor de desarrollo?

Para asegurarte de que todo está funcionando correctamente, inicia el servidor de desarrollo con:

npm start

Esto abrirá la aplicación en tu navegador predeterminado, generalmente en localhost:3000.

¿Cómo garantizar la compatibilidad entre versiones?

Es fundamental verificar que todas las dependencias de tu proyecto sean compatibles. Por ejemplo, React Router DOM 5 podría no ser compatible con React 18, por lo tanto, deberías asegurarte de que estás utilizando versiones compatibles para evitar problemas.

Con estos pasos, tendrás React Router DOM 6 listo para ser utilizado en tu proyecto. Este conocimiento te proporcionará una base sólida para comenzar a trabajar con rutas y componentes, permitiéndote estructurar mejor tu aplicación React. ¡No dudes en explorar más y experimentar! Aprender y adaptarse a nuevas tecnologías es crucial en el mundo del desarrollo web.

Aportes 17

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Olvídense de npx create-react-app. Con ViteJS con el comando npm create vite@latest name-project-here --template react lo instalan en 10 s, como maximo y con codigo mas limpio al empezar.

Instalación de React Router DOM 6

Si deseas consultar la documentación oficial de React Router puedes hacerlo en esta página, donde hay documentación detallada.

Instalación

Para esto en nuestra terminal vamos a crear un nuevo proyecto en React con tu método de preferencia, yo prefiero hacerlo con Vite.js

npm create vite@latest

# Pasos
name-proyect || ./
template react

Luego de esto, vamos a introducir el siguiente comando para instalar React Router DOM.

# Instalar React DOM versión actual
npm install --save react-router-dom

# Instalar React DOM 6 
npm install --save react-router-dom@6

Luego como es Vite vamos a introducir el comando:

npm run dev

Luego abrimos el puerto indicado en el navegador y ya tendríamos nuestro proyecto listo para que empecemos.

React Router
React Router v6
GitHub React-Router

npm install react-router-dom@6

Like. Si tampoco sabes cual es el curso de npm para hacer npm audit fix --force

.

Cada version de react-router-dom tiene breaking changes. Aunque los conceptos son los mismos. Asegurate de usar las mismas versiones de la clase.

Instalación de React Router DOM 6

.
Vamos a instalar la versión de React Router DOM 6. Existen muchas versiones, Sin embargo utilizaremos la versión 6.
.
Creamos un proyecto de React con Create React App,
.

npx create-react-app nombre-de-tu-proyecto

.
Es importante notar que estamos utilizando React en su versión 18. Esto porque React Router DOM de la versión 5 hacia atrás no soporta React 18 por los cambios en la forma en el que creaba el root por lo que se debería utilizar React 17 para abajo en ese caso.
.
Instalamos React Router DOM y luego corremos la aplicación en el localhost:3000.
.

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

.
Podemos notar que React Router DOM se guarda en dependencies y no en devDependencies. Esto porque la vamos a necesitar incluso si desplegamos a producción.

Hola a todos, para un proyecto con React + Vite + React Router DOM + TypeScript ( sin miedo al éxito, papui)

  • Comando para crear el proyecto: npm créate vite@latest
    Luego eliges react, typescript y listo
  • Comando para instalar react router dom: npm install --save react-router-dom
    Es una herramienta que necesitaremos en desarrollo y producción.
  • Comando para instalar tipos de RRD: npm i -D @types/react-router-dom
    Es una herramienta que necesitaremos en desarrollo.

Mi package.json queda de la siguiente form:

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@types/react-router-dom": "^5.3.3",
    "@typescript-eslint/eslint-plugin": "^5.59.0",
    "@typescript-eslint/parser": "^5.59.0",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "^5.0.2",
    "vite": "^4.3.9"
  }

Hola Juan, una pregunta. ¿Por qué siguen sacando cursos nuevos de React usando CRA en vez de Vite, por ejemplo?
.
Creo que no hay razón alguna en la CRA tenga algo mejor que Vite para estas clases de miniproyectos educativos. abrazo!

npm install react-router-dom@6.3.0

me encanta la conversación del profe mientras se instala react

Habla mucho !!!
```js npx create-react-app name-project or ./ npm i --save react-router-dom@6 ```
Vengo del futuro REACT ROUTER DOM V6.4
(Mis apuntes de Notion💚)\[<https://whip-soil-3b5.notion.site/Instalaci-n-de-React-Router-DOM-6-0fa59d6aab354b198f19cf0f79bf99cc?pvs=4>]
\[Mis apuntes de Notion💚]\(https://whip-soil-3b5.notion.site/Instalaci-n-de-React-Router-DOM-6-0fa59d6aab354b198f19cf0f79bf99cc?pvs=4)

Con tantas advertencias creí que llagaba un par de años tarde para esto, pero al ver la fecha de los comentarios puede respirar en paz, actualmente está la versión 6.14 y la versión 6.4 se promociona con entusiasmo.