[Fix] Attempted import error ‘Switch’ is not exported from ‘react-router-dom’

The Error “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’.” is an error that is invoked whenever you are coding in react.js and have recently updated your react-router-dom. Given below is the snippet of the error:

Attempted import error: 'Switch' is not exported from 'react-router-dom'.

I would like to share with you the steps I took to fix the “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’.” in your project file.

Why Attempted import error ‘Switch’ is not exported from ‘react-router-dom’ Error is Seen?

The error, “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’.” is seen because in the latest version 6 of react-router-dom, the “Switch” is replaced by routes “Routes”

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 “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom'”, is given below:

How to fix Attempted import error ‘Switch’ is not exported from ‘react-router-dom’?

To fix the error, you will have to replace your “Switch” by routes “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 still face the error.

To fix the error, “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’.”, you have to follow one of the below mentioned methods:

Method 1: Replace Switch by Routes

To fix the error, “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’.”, you will have to replace your “Switch” is by routes “Routes” in your imports. You will have to replace the below mentioned code:

import { Switch, Route } from "react-router-dom";

with:

import { Routes ,Route } from 'react-router-dom';

In addition to this you have to update your Route declaration from the below mentioned code:

<Route path="/" component={Home} />

to

<Route path='/welcome' element={<Home/>} />

In the react-router-dom version 6, you don’t have the need to use the exact in the Route declaration. To know more about react-router-dom version 5, you can read more about it in its official documentation here. 

This should fix the error, “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’.”.

Method 2: Rollback to the previous version of react-router-dom

If you are still facing the error, “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom'”, you have to uninstalled the version 6 of react-router-dom by following the below mentioned code:

npm uninstall react-router-dom

Then you have to install the version 5.2.0 of react-router-dom by following the below mentioned code:

npm install react-router-dom@5.2.0

This should fix the error, “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom'”.

Conclusion

To fix the error “Attempted import error: ‘Switch’ not exported from ‘react-router-dom'”, you have to replace your “Switch” is by routes “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.