I don't know why I am getting this error and I can't find an answer for it anywhere. I have uninstalled the react-router-dom package and reinstalled it, but it continues to tell me that the switch module is not exported from react-router-dom. Here's my code.
The error I'm getting:
Attempted import error: 'Switch' is not exported from 'react-router-dom'.
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;
In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from
import { Switch, Route } from "react-router-dom";
to
import { Routes ,Route } from 'react-router-dom';
You also need to update the Route declaration from
<Route path="/" component={Home} />
to
<Route path='/welcome' element={<Home/>} />
In react-router-dom, you also do not need to use the exact in the Route declaration.
For more information, you can visit the official documentation: upgrade to react-router-dom v6
If you are using react-router-dom v6 it looks like Switch has been replaced with Routes
I also faced the same problem, and I searched towards the Internet so much, but I didn't get any answer according to my question.
So I uninstalled 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