If you are working on your JavaScript framework, you might get the error “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’”. It will definitely stop you from developing your project. You might want to go through this blog to get to know how to fix this error.

When Do You Get The Error “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’”?

When you run your reactjs app, you may get the following error.

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

How To Fix The Error “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’”?

Option 1: Use Routes instead of Switches

If you’re using React-Router-dom v6+, Routes will take the place of Switch. So all you have to do now is import Routes, and you’re ready to go. We’ll give you an 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

You’ll also have to update your Route declaration:

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

to:

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

Your problem has now been resolved.

Here’s an instance of V6:

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;

Option 2: Downgrade react-router-dom

Simply downgrade react-router-dom to version 5.2.0. So, first and foremost, utilize this command to remove react-router-dom: 

npm uninstall react-router-dom

After that, utilize this command to install 5.2.0: 

npm install [email protected]

Option 3: Update the code for react-router-dom and related components to the most recent version

Follow these steps to solve your error ”Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’”.

Step 1: Upgrade to react-router-dom v6+ and react 16.8+.

In order to use react-router-dom version 6, which heavily relies on React hooks, you must first upgrade to react version 16.8 or above.

Upgrade to react-router-dom v6+ next. Running the command below if you are not currently using V6 or the most recent version:

npm install react-router-dom

The @latest keyword can also be used to install the most recent version of the package.

Step 2: Modify the import statement for react-router-dom.

You need alter the syntax of the Router now that you have react-router-dom v6+ and react 16.8+. First, we need to replace “Switch” with “Routes” in the import declaration. Therefore, change the import declaration as follows:

//import { Switch, Route } from "react-router-dom";
//to
import { Routes ,Route } from 'react-router-dom';

Step 3: Update the syntax to use “Routes” in place of “Switch,” and “component” in place of “element”.

The final step would be to change the “Switch” and “component” in the example to “Routes” and “Element”, respectively. Therefore, change the word “Switch” to “Routes” and change the word “component” to “element,” as in the example below.

// <Switch>
// <Route path="/home" component={HomePage} />
// </Switch>

//to

<Routes>
<Route path="/home" element={<HomePage/>} />
</Routes>

Take note of how the component=HomePage was changed to element=HomePage/> in accordance with the new syntax.

Your problem must now be resolved.

Conclusion

We hope our blog post on how to solve the “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’” problem was useful. With this information, you should be able to handle this annoyance and a slew of other concerns when you design your application. Please leave a comment if you want to learn more about the topic or if you have any questions or ideas to share. Thank you for taking the time to read this!