Hello Guys, How are you all? Hope You all Are Fine. Today I am facing following error while running my reactjs app Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ in ReactJs. So Here I am Explain to you all the possible solutions here.
Without wasting your time, Let’s start This Article to Solve This Error.
How Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ Error Occurs ?
I am facing following error while running my reactjs app.
Attempted import error: 'Switch' is not exported from 'react-router-dom'
How To Solve Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ Error ?
How To Solve Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ Error ?
To Solve Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ Error You Just need to Downgrade react-router-dom to 5.2.0 So that First of all Just Uinstall react-router-dom With the help Of This Command: npm uninstall react-router-dom And Then Install 5.2.0 with help of this command: npm install react-router-dom@5.2.0 Now, Your error must be solved.
Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’
To Solve Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ ErrorIf You are using React-Router-dom v6+ Then There is Switch is replaced with Routes So You Need to simply import Routes and Then You can Use It Here Is I am giving Example: import { Routes ,Route } from ‘react-router-dom’; # Working in v6 And Above Also You Need to update Route declaration: <Route path=’/home’ element={<Home/>} /> Now, Your error will be solved.
Solution 1: Replace Switch with Routes
If You are using React-Router-dom v6+ Then There is Switch is replaced with Routes So You Need to simply import Routes and Then You can Use It Here Is I am giving Example.
Before
import { Switch, Route } from "react-router-dom";
# Working In Smaller than v6
import { Routes ,Route } from 'react-router-dom'; # Working in v6 And Above
Also You Need to update Route declaration
<Route path="/" component={Home} />
to
<Route path='/home' element={<Home/>} />
Now, Your error will be solved.
Here is V6 Example.
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;
Solution 2: Downgrade react-router-dom
You Just need to Downgrade react-router-dom to 5.2.0 So that First of all Just Uinstall react-router-dom With the help Of This Command.
npm uninstall react-router-dom
And Then Install 5.2.0 with help of this command.
npm install react-router-dom@5.2.0
Now, Your error must be solved.
Here is before v6.*
example.
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;
Summary
It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?
Also, Read
Thank you buddy! Your info was so much helpful.
Thanks, it helped me too 🙂
It’s my Pleasure to Help You Maria. Thank You So Much For Your Valuable words.
Thank you so much!
Clearly explain, Thank you !
My pleasure to help You Enygeek and Thank You For your Valuable Word!
thank you a lot ! downgrade react-router-dom solved mine <3
My pleasure to help You Salar Hosseini and Thank You For your Valuable Word!
That was really helpful. Thanks a lot!
My pleasure to help You Cassiano Matos and Thank You For your Valuable Word!
This worked. Thank you 🙂
It’s my Pleasure to Help You, Agon. Thank You For Your Valuable words ❤️.