Si está utilizando react-router-dom v6, parece que Switch ha sido reemplazado por Routes

¿Cuál es su versión de react-router-dom?

 "react-router": "^5.2.0", "react-router-dom": "^5.2.0",

Si está por encima de uno, debe eliminar los módulos de nodo y reinstalar el módulo de nodo usando npm install --save .

Escriba <Routes> en lugar de <Switch> .

Ejecuta esto en la terminal:

 npm install --save react-router react-router-dom

Esto me ayudó. O verifique el archivo package.json y agregue lo siguiente justo después "react-dom": "^17.0.2",

 "react-router": "^6.0.0",

En react-router-dom v6, "Cambiar" se reemplaza por rutas "Rutas". Necesitas actualizar la importación desde

 import { Switch, Route } from "react-router-dom";

para

 import { Routes ,Route } from 'react-router-dom';

También debe actualizar la declaración de ruta de

 <Route path="/" component={Home} />

para

 <Route path='/welcome' element={<Home/>} />

En react-router-dom , tampoco necesita usar el valor exacto en la declaración de ruta.

Para obtener más información, puede visitar la documentación oficial: actualizar a react-router-dom v6

También enfrenté el mismo problema y busqué mucho en Internet, pero no obtuve ninguna respuesta de acuerdo con mi pregunta.

Así que desinstalé la versión 6 de react-router-dom:

 npm uninstall react-router-dom

E instaló la versión 5.2.0 de react-router-dom:

 npm install react-router-dom@5.2.0

Resolví el problema así:

 yarn add react-router-dom@5,3,0

Me enfrenté al mismo problema y eliminé react-router-dom y luego lo reinstalé.

El problema ocurrió porque lo actualicé a la última versión, es decir, react-router-dom v6 y luego quise cambiar a la versión anterior, es decir, v5.

Estaba en el proyecto Ruby on Rails y usaba yarn para administrar la dependencia, puede usar este comando para eliminarlo y reinstalarlo:

yarn remove react-router-dom

yarn add react-router-dom

Esto debería resolver el problema.

Estaba enfrentando el mismo problema que el cartel del problema. Intenté todas las cosas como a continuación:

• desinstalar e instalar reaccionar-router-dom
• Switch importado por separado de react-router-dom

Pero nada realmente funcionó para mí.

Siga las instrucciones a continuación. Estoy seguro de que no volverás a tener el error.

Código correcto:

 import React from "react"; import "./App.css"; import NavBar from "./components/navbar.js"; import Footer from "./components/footer.js"; import Home from "./components/pages/homepage/home.js"; import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; function App() { return ( <Router> <div className="app-container"> <NavBar /> <Routes> <Route path="/home" element={<Home/>} /> </Routes> <Footer /> </div> </Router> ); } export default App;

Nota: Switch se reemplazó con Routes y, en lugar de usar el componente, necesitamos usar el elemento .

Switch ha sido reemplazado por Rutas

Fuente de Actualizar enrutamiento (sintaxis reaccionar-router-dom) # 1386 (howtographql GitHub)

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; function App() { return ( <> <Router className="App"> <Navbar/> <Routes> <Route path='/'> </Route> </Routes> </Router> </> ); } export default App;

Este es un ejemplo usando react-router-dom V6

 import React from 'react' import { BrowserRouter as Router, Route, Routes } from 'react-router-dom' import '../styles/global.css' import Layout from '../containers/Layout' import Home from '../pages/Home' import Login from '../containers/Login' import RecoveryPassword from '../containers/RecoveryPassword' import NotFound from '../pages/NotFound' const App = () => { return ( <Router> <Layout> <Routes> <Route exact path="/" element={<Home/>}/> <Route exact path="/login" element={<Login/>}/> <Route exact path="/recovery-password" element={<RecoveryPassword/>}/> <Route path="*" element={<NotFound/>}/> </Routes> </Layout> </Router> ); } export default App;

Cambiar de

 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; <Switch> <Route path="/home" component={Home} /> </Switch>

para

 import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; <Routes> <Route path="/home" element={ <Home />} /> </Routes>

Si está utilizando react-router-dom v6, debe cambiar Cambiar a rutas como se muestra en el siguiente ejemplo:

En lugar de importar Switch, import { Switch, ... } from 'react-router-dom';

importar Rutas import { Routes, ...} from 'react-router-dom';

Luego, en lugar de usar component = {ComponentName}, use element={<ComponentName/>} como se muestra a continuación:

 import { Routes, Route, ...} from 'react-router-dom'; . . . <Routes> <Route exact path='/' element={<Home/>}></Route> </Routes>

Una solución:

Elimine la carpeta node_modules . En el archivo package.json , cambie la versión de react-router-dom (versión 6 en mi caso) a "react-router-dom": "^5.2.1"

Luego en la terminal ejecuta:

npm install para instalar las dependencias y luego ejecutar npm start para reiniciar

Resolví mi error cambiando la forma en que estaba representando mis rutas para el uso del element .

Para:

 import React from "react"; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import { Home } from "./app"; import { Login, Register } from "./auth"; const R: React.FC = () => { return ( <Router> <Routes> <Route path="/login" caseSensitive={false} element={<Login />} /> <Route path="/register" caseSensitive={false} element={<Register />} /> <Route path="/" caseSensitive={false} element={<Home />} /> </Routes> </Router> ); }; export default R;

Básicamente antes de v6.* :

 import React from "react"; import { BrowserRouter as Router, Route, Switch} from "react-router-dom"; import { Home } from "./app"; import { Login, Register } from "./auth"; const R: React.FC = () => { return ( <Router> <Switch> <Route path="/login"> <Login /> </Route> <Route path="/register"> <Register/> </Route> <Route path="/"> <Home/> </Route> </Switch> </Router> ); }; export default R;

Después de v6.*

 import React from "react"; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import { Home } from "./app"; import { Login, Register } from "./auth"; const R: React.FC = () => { return ( <Router> <Routes> <Route path="/login" caseSensitive={false} element={<Login />} /> <Route path="/register" caseSensitive={false} element={<Register />} /> <Route path="/" caseSensitive={false} element={<Home />} /> </Routes> </Router> ); }; export default R;

Recibí este error después de instalar react-router-dom v6.0.2.

Reemplazar Switch con Routes resolvió el problema:

 import {BrowserRouter as Router, Route, Routes} from "react-router-dom";

La sintaxis ha cambiado

Sintaxis antigua

 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; <Switch> <Route path="/home" component={Home} /> </Switch>

Nueva sintaxis:

 import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; <Routes> <Route path="/home" element={<Home/>} /> </Routes>

en react-router-dom v6 Switch se reemplaza con rutas

y componente con elemento

{componentName} con {}

Pude arreglarlo cambiando de Cambiar a Rutas. Así que deberías tener algo como esto:

 <Routes> <Route path='/home' element={<Home/>} /> </Routes>

y también necesita cambiar la importación de Cambiar a Rutas:

 import { Routes, Route } from "react-router-dom";

Si está utilizando una versión más nueva de react-router-dom (por ejemplo, ^6.2.1 en mi caso), debe cambiar <Switch> a <Routes> y usar <Route> con el component={<SampleComponent />} parámetro.

Particularmente el siguiente código de ejemplo:

 import { BrowserRouter as Router, Routes, Route} from 'react-router-dom'; import MyComponent from './containers/MyComponent'; export default function AppRoutes() { return ( <Routes> <Route exact path="/" component={<MyComponent />}> </Route> </Routes> ); }

Si instaló react-router y react-router-dom v6 beta , simplemente desinstálelo así:

 npm uninstall --save react-router react-router-dom

Y lo instalas con esto:

 npm install --save react-router react-router-dom

Se va a instalar la última versión que no es beta.

Luego, solo necesitamos reiniciar Visual Studio Code o cualquier editor de texto con el que lo maneje.

En react-router-dom v6, Switch se reemplazó con Routes. Utilice este formato:

 import { BrowserRouter as Router, Routes, Route} from 'react-router-dom'; <Router> <Routes> <Route exact path="/" component={component} /> <Route exact path="/path2" component={component2} /> <Route exact path="/path3" component={component3} /> </Routes> </Router>

También me enfrentaba a ese problema y finalmente lo resolví organizando el código. Soy muy nuevo en React.

El siguiente es mi código App.js (componente base de clase):

 import logo from './logo.svg'; import './App.css'; import React, { Component } from 'react' import PropTypes from 'prop-types' import Navbar from './components/Navbar'; import News from './components/News'; import { BrowserRouter as Router, Route, Routes,Link } from 'react-router-dom' export class App extends Component { static propTypes = { } render() { return ( <> <Navbar/> <Router> <Routes> <Route path="/general"><News pageSize={3} country={'us'} category={'general'}/></Route> </Routes> </Router> </> ) } } export default App

<Switch> se reemplaza por <Routes>

Antes:

 import { Route, Switch} from 'react-router' <Router> <Switch> <Route /> <Route /> </Switch> </Router>

Ahora:

 import { Route, Routes} from 'react-router' <Router> <Routes> <Route /> <Route /> </Routes> </Router>

Simplemente use Rutas en lugar de Switch.

Si está utilizando la versión 6 de react-router-dom, use este

Además, consulte aquí como referencia: https://reactrouter.com/docs/en/v6/upgrading/v5#:~:text=single%20route%20config%3A-,//%20This%20is%20a%20React %20Router%20v6%20app,%7D,-Este%20paso%20es

 // This is a React Router v6 app import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom"; function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="users" element={<Users />}> <Route path="me" element={<OwnUserProfile />} /> <Route path=":id" element={<UserProfile />} /> </Route> </Routes> </BrowserRouter> ); } function Users() { return ( <div> <nav> <Link to="me">My Profile</Link> </nav> <Outlet /> </div> ); }

En realidad, esto no es un problema para usted, React o su código. Es solo la versión actualizada de react-router-dom. Reemplace el interruptor por rutas.

Eso es todo. Simplemente use Rutas en lugar de Cambiar y funciona bien.

Si está utilizando la versión 6 de react-router-dom, entonces necesita actualizar Switch con Routes . La siguiente sintaxis funcionó para mí:

 import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import './App.css'; import Home from './components/Home'; function App() { return ( <div> <Router> <Routes> <Route path="/" exact element={<Home />} /> </Routes> </Router> </div> ); } export default App;

Primero debe verificar la versión del paquete npm. Para verificar, ejecute npm info react-router-dom version .

Si la versión del paquete es >= 6.0.0, debe cambiar

 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

para

 import { BrowserRouter as Router,Routes, Route, Link } from "react-router-dom";

Y también hay que cambiar

 <Route path="/home" component={Home} />

para

 <Route path="/home" element={<Home/>} />

Tuve el mismo problema. En la terminal del proyecto, escriba los siguientes comandos. No tendrá que hacer ningún cambio en su código.

1. npm uninstall react-router-dom

2. npm install react-router-dom@5.2.0

react-router-dom se ha actualizado a la versión 6. Ahora han cambiado el nombre del componente <Switch/> a <Routes/> . También hay muchos cambios.

Debería dedicar algún tiempo a leer la documentación. Aquí está el enlace para reaccionar-router-v6-doc .

Switch se exporta desde react-router y no desde react-router-dom (lo mismo ocurre con Route , creo).