Instalación de React Router DOM 6

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

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.