xxxxxxxxxx
/*Step 1: Step 1. Upgrade to React 16.8+ and react-router-dom v6+ */
npm uninstall react-router-dom
npm install react-router-dom
/*Step 2: Update the react-router-dom import statement.*/
//Change import { Switch, Route } from "react-router-dom";
//to
import { Routes ,Route } from 'react-router-dom';
/*Step 3: Upgrade the syntax and replace "Switch" with "Routes" and "component" with "element" */
//Change
// <Switch>
// <Route path="/home" component={HomePage} />
// </Switch>
//to
<Routes>
<Route path="/home" element={<HomePage/>} />
</Routes>
//Alternatively you can also downgrade the react-router-version as suggested in other solutions,
//However, rather than going backwards, I would suggest to upgrade to latest version of react-router-dom and its syntax.
xxxxxxxxxx
replace your code with
import { Switch, Route } from "react-router-dom";
to
import { Routes ,Route } from 'react-router-dom';
xxxxxxxxxx
react-router-dom v6 example: //NO SWITCH IN 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;
xxxxxxxxxx
//CHANGE:
import { Switch, Route } from "react-router-dom";
//to
import { Routes ,Route } from 'react-router-dom';
//CHANGE:
<Route path="/" component={Home} />
//to
<Route path='/welcome' element={<Home/>} />
xxxxxxxxxx
uninstal react-router-dom
npm uninstall react-router-dom
//and install old version it will resolve the error
npm install react-router-dom@5.2.0
xxxxxxxxxx
//uninstall the version 6 of react-router-dom
npm uninstall react-router-dom
//And installed version 5.2.0 of react-router-dom
npm install react-router-dom@5.2.0
//or use the v6 code
//This is an example using 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>
);
}
xxxxxxxxxx
Here Just Install Switch.
And then you can use Switch.
Switch is replaced in react-router-dom version 6.
So that you need to install react-router-dom version 5.
Now, your error should be solved.
Run the command below in your terminal
npm install react-router-dom@5
xxxxxxxxxx
//change Switch to Routes like this
// instead of this
import { Switch, Route } from "react-router-dom";
//write this
import { Routes ,Route } from 'react-router-dom';
xxxxxxxxxx
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, Switch, Route, Link } from "react-router-dom";
function App() {
return (
<Router>
<div className="app-container">
<NavBar />
<Switch>
<Route path="/home" component={Home} />
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;