[Solved] Attempted Import Error: ‘Switch’ Is Not Exported From ‘React-Router-Dom’.

If you are using the react-router-dom package version 6, you may encounter an Attempted Import Error: ‘Switch’ Is Not Exported From ‘React-Router-Dom’. error. This error is caused by using the react-router-older dom’s switch syntax. The react-router-dom has replaced “Switch” with “Routes” since version 6. Let’s see how to fix the ‘Switch’ is not exported from’react-router-dom’ error.

What Causes This Error?

As I previously stated, the reason for the ‘Switch’ is not exported from’react-router-dom’ error is that you are using v6 or higher of react-router-dom while the syntax you are using is still the older one. “Routes” replaces “Switch” in react-router-dom v6 and later.

Example:

import React from 'react';
import './main.css';
import NavBar from './components/navbar.js';
import HomePage from './components/pages/homepage.js';
import Footer from './components/footer.js';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="main-wrapper">
        <NavBar />
        <Switch>
          <Route path="/home" component={HomePage} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

And package.json may include the following.

"dependencies": {
    ...
    "react-router-dom": "^6.2.1" // Version 6 of React
  },

Solutions To This Error

We can see in the above code that the code uses Switch>, whereas the package.json states that we are using react-router-dom v6.

There are two approaches to dealing with the ‘Switch’ is not exported from’react-router-dom’ error in ReactJs.

• Solution 1: Update react-router-dom and related code to the most recent version.
• Solution 2: Upgrade react-router-dom to V5 so that the code recognizes the Switch> Statement.

Now let us explore each solution in detail:

Solution-1

• You must first upgrade to react version 16.8 or higher, as react-router-dom version 6 heavily relies on React hooks.
• Second, if you are not already using the latest version or V6, upgrade to react-router-dom v6+ with the following command:

npm install react-router-dom

• You should update the Router’s syntax now that you have React 16.8+ and react-router-dom v6+. First, we must change the import statement to import “Routes” rather than “Switch.”

So, make the following changes to the import statement:

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

• As shown in the example, the third step would be to replace “Switch” with “Routes” and “component” with “element.”
• So, in the following example, replace Switch> with Routes> and component attribute to element.

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

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

Solution-2

• There is another way to resolve the ‘Switch’ is not exported from’react-router-dom’ error. As previously stated, the error is caused by using react-router-dom version 6+ and the older Router syntax.
• If you don’t have time to update all of the syntaxes, you can downgrade the react-router-dom package to version 5.2.0 or 5.3.0.
• You can downgrade to react-router-dom version 5.2.0 by uninstalling the current package version and then installing v5.2.0. You can accomplish this by issuing the following commands:

npm uninstall react-router-dom

• then run the command below to install a specific version of react-router-dom.

npm install [email protected]

• This way, you won’t have to worry about upgrading react-router-syntax dom’s and can avoid the hassle for the time being.
• In the long run, I recommend that you always upgrade to the most recent version of the package. This can be useful for resolving the error “‘Routes’ is not exported from’react-router-dom’ “, which can occur when you use an older version of react-router-dom but a newer version of code.

Also read:- [Fixed] Error: ‘\u’ Used Without Hex Digits In Character String Starting “”c:\u”

Conclusion

To summarize, the best way to resolve the ‘Switch’ is not exported from’react-router-dom’ error is to upgrade to react-router-dom v6 or higher while also updating the syntax. If you do not want to update to react-router-dom version 6, you can instead downgrade to version 5.2.0, in which case you do not need to update the syntax code.

If you have any questions, please let us know in the comments below.