The Error “export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’ “, is an error that is invoked whenever you are coding on react.js and using ‘switch’. Given below is the snippet of the error you might get:
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
I would like to share with you the steps I took to fix the “export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’ ” in your project file.
Why “export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom'” Error is Seen?
The error, “export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’ ” is seen because; to use react-router
v6, you’ll need to convert all your <Switch>
elements to <Routes>
. This is because in react router dom version greater than 6 the switch element has been deprecated for security reasons.
As per official React v6 document, Routes and Route are defined together as mentioned below:
The basic methods to render anything in React Router depending on the current location are <Routes> and <Route>.
Consider a <Route> to be an if statement; if its route matches the current URL, it displays its element! The <Route caseSensitive> property specifies if the matching should be case-sensitive (defaults to false).
When the location changes, <Routes> searches through all of its children <Route> components for the best match and displays that branch of the UI. Nesting <Route> components show nested UI, which also corresponds to nested URL pathways.
By rendering an <Outlet>, parent routes render their child routes.
Below is an example how to use the Routes rather Switches in React router v6:
<Routes>
<Route path="/" element={<Dashboard />}>
<Route
path="messages"
element={<DashboardMessages />}
/>
<Route path="tasks" element={<DashboardTasks />} />
</Route>
<Route path="about" element={<AboutPage />} />
</Routes>
The detailed solution to fix the error “export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’ “, is given below:
How to Fix export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’ Error?
To fix the error “export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’ “, you will have to convert all your <Switch>
elements to <Routes>
in your imports. You can also roll back to the previous version of react-router-dom that is react-router-dom version 5.2.0 if you are still facing the error.
To fix the error, “export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’ “, you have to follow the below mentioned steps:
In case you are using a react-router-dom
version 6 or greater, then Switch
is replaced with Routes
. So you will have to import routes
and then you will be able to use it like the steps mentioned below:
Before working in react router dom
version lesser than 6 your code will look like the below mentioned code :
import { Switch, Route } from "react-router-dom";
Now, after working in react router dom
version 6 or greater, your code will look like the below mentioned code :
import { Routes ,Route } from 'react-router-dom';
Also You Need to update Route declaration. Before working in react router dom
version lesser than 6 your code will look like the below mentioned code :
<Route path="/" component={Home} />
Now, after working in react router dom
version 6 or greater, your code will look like the below mentioned code :
<Route path='/home' element={<Home/>} />
This should fix the error, “export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’ “.
Conclusion
To fix the error “export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’ “, you will have to convert all your <Switch>
elements to <Routes>
in your imports. You can also roll back to the previous version of react-router-dom that is react-router-dom version 5.2.0 if you are still facing the error.