[Fix] Export 'Switch' (imported As 'Switch') Was Not Found In 'react-router-dom' 2023

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’ “.

[Fix] export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’

Why “export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom'” Error is Seen?

How to Fix export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’ Error?

Conclusion