Today We are Going To Solve Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ in ReactJs. Here we will Discuss All Possible Solutions and How this error Occurs So let’s get started with this Article.
Contents
How to Fix Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ Error?
- How to Fix Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ Error?
To Fix Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ Error just Change
Home
to<Home/>
. To solve the error you have to just update the import fromimport { Switch, Route } from "react-router-dom";
toimport { Routes ,Route } from 'react-router-dom';
And after it just changeHome
to<Home/>
just like below. Change<Route path="/" component={Home} />
to<Route path='/welcome' element={<Home/>} />
And your error will be solved. Try this. - Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’
To Fix Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ Error just Install react-router-dom version 5.2.0. Just uninstall react-router-dom version 6 by below command:
npm uninstall react-router-dom
And then install react-router-dom version 5.2.0 by using the given below command:npm install [email protected]
Solution 1 : Change Home
to <Home/>
To solve the error you have to just update the import from
import { Switch, Route } from "react-router-dom";
to
import { Routes ,Route } from 'react-router-dom';
And after it just change Home
to <Home/>
just like below. Change
<Route path="/" component={Home} />
to
<Route path='/welcome' element={<Home/>} />
And your error will be solved. Try this.
Solution 2 : Install react-router-dom version 5.2.0
Just uninstall react-router-dom version 6 by below command:
npm uninstall react-router-dom
And then install react-router-dom version 5.2.0 by using the given below command:
npm install [email protected]
Solution 3 : Use the correct syntax
You have to use the correct syntax to solve this problem. So you can use the below syntax which will help you.
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
<Routes>
<Route path="/home" element={<Home/>} />
</Routes>
Solution 4 : Replace <Switch>
by <Routes>
Just replace <Switch>
by <Routes>
and your error will be solved. Replace it just like below:
import { Route, Switch} from 'react-router'
to
import { Route, Routes} from 'react-router'
Conclusion
So these were all possible solutions to this error. I hope your error has been solved by this article. In the comments, tell us which solution worked? If you liked our article, please share it on your social media and comment on your suggestions. Thank you.
Also Read This Solutions
- AAPT: error: resource android:attr/lStar not found in Android
- ImportError: No module named flask
- No signature of method: .android() is applicable for argument types. Exception in build.gradle (app)
- Node Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
- ImportError: No module named ‘google’