Attempted import error switch is not exported from react router dom imported as switch

In package.json file react-router-dom dependencies added. App component wrapped by BrowswerRouter , but when I wrap route by switch it says the following error Switch’ is not exported from ‘react-router-dom’. I deleted the package.json.lock ,node modules, installed npm again and npm install @babel/core —save. Still not working. I successfully wasted 6 hour for this. Can you please help me to fix this? why it’s not importing?

Index.js

import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
     <App />
  </BrowserRouter>,
  document.getElementById('root')
);

App.js:

 import logo from './logo.svg';
import './App.css';
import React from 'react';
import {Switch,Route,Link} from 'react-router-dom';
import Home from './Home';
class App extends React.Component {
  componentDidMount(){
    alert('mounting');
  }
  componentDidUpdate(){
    alert('updated');
  }
 render(){
  return (
    
    <div className="App">
     
    <div>
      <Link to="/">Home</Link>
    </div>

    <hr />

    <Switch>
      <Route exact path="/">
        <Home/>
      </Route>
    </Switch>
 
  </div>
 
);
 }
}

export default App;

import React from 'react';

    const Home = () => {
    return <h1>Home</h1>;
  };
  
  export default Home;

package.json

"dependencies": {
    "@babel/core": "^7.16.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.0.0",
    "react-router-dom": "^6.0.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

You might be facing an “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ ” error if you are using the react-router-dom package version 6. This error is caused due to using the older switch syntax of the react-router-dom. From version 6 onwards, the react-router-dom has replaced “Switch” with “Routes”. Let us take a look at how to solve the ‘Switch’ is not exported from ‘react-router-dom’ error.

What causes the ‘Switch’ is not exported from ‘react-router-dom’ error in Reactjs?

As I mentioned earlier, the cause of the ‘Switch’ is not exported from ‘react-router-dom’ error mostly is because you are using v6 or above of react-router-dom whereas the syntax you are using is still the older one. In react-router-dom v6 onwards, the “Switch” is replaced by “Routes”.

An Example of code that might throw the error:

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 the package.json might have the following

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

In the above code we can notice that the code is using <Switch> , whereas the package.json says that we are using v6 of react-router-dom.

There are 2 ways we can solve the ‘Switch’ is not exported from ‘react-router-dom’ error in ReactJs.

• Solution 1 : Upgrade the react-router-dom and the related code to the latest version
• Solution 2 : Downgrade react-router-dom to V5 so that the code understands the <Switch> Statement.

Lets us take a look at both the solutions.

How to solve ‘Switch’ is not exported from ‘react-router-dom’ error in ReactJs? Solution 1

In order to solve the ‘Switch’ is not exported from ‘react-router-dom’ error in ReactJs, we need to update the syntax of the routes defined. From version 6 onwards, the react-router-dom has replaced “Switch” with “Routes”. And hence we need to update the syntax accordingly. Let us take a look at the steps to solve the ‘Switch’ is not exported from ‘react-router-dom’ error.

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

Firstly you would have to upgrade to react version 16.8 or above version as react-router-dom version 6 makes heavy use of React hooks.

Secondly, upgrade to react-router-dom v6+ using the following command if you are already not using the latest version or V6:

npm install react-router-dom

You can also use the @latest keyword to install the latest version of the package

Step 2: Update the react-router-dom import statement.

Now that you have React 16.8+ and react-router-dom v6+, you should update the Router’s syntax. Firstly we need to update the import statement to import “Routes” instead of “Switch”.

So, Update the import statement like the following

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

Step 3: Upgrade the syntax and replace “Switch” with “Routes” and “component” with “element’

The third step would be to replace the “Switch” with “Routes” and the “component” with “element” as shown in the example.

So, replace the <Switch> with <Routes> and component attribute to element, like in the following example

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

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

Notice that the component={HomePage} too got updated to element={<HomePage/>} as per the new syntax. You can read more about the process to update react-router-dom from v5 to v6 at https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-to-react-router-v6 .

An alternative way to fix the ‘Switch’ is not exported from ‘react-router-dom’. Solution 2

There is an alternative way to fix the ‘Switch’ is not exported from ‘react-router-dom’ error too. As we discussed earlier, the error is caused due to using react-router-dom version 6+ and using the older syntax of Router. So if you don’t have the time to update all the syntax, the alternative would be to 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 first uninstalling the package version installed and then installing the v5.2.0. You can do so by using the following commands:

npm uninstall react-router-dom

then use the following command to install a specific version of react-router-dom

npm install [email protected]

This way you would not have to worry about upgrading react-router-dom’s syntax and avoid all the hassle temporarily. On the long run I would recommend you to always upgrade to the latest version of the package . This can be useful to fix the issue ” ‘Routes’ is not exported from ‘react-router-dom’ “, which can be caused because you are using older version of react-router-dom but newer version of code.

To conclude, I can say that to solve the ‘Switch’ is not exported from ‘react-router-dom’ error, the best way is to upgrade to react-router-dom v6 or above while updating the syntax too. However, alternatively, if you don’t want to update to react-router-dom version 6, you can also instead downgrade to version 5.2.0 , in which case, you need not update the syntax code too.

In this post, we will see How To Fix – “Attempted Import Error: ‘Switch’ is Not Exported From ‘react-router-dom’ in React.js, React-Router-Dom. Various facets of the same error.

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

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

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

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

There could be possible reasons for the issue which we will explore and try to fix.

Primitive Check:

Let’s do couple of quick checks to make sure things are noted for us.

• Which React-Router and React-Router-Dom version are you using ? Run any of the below commands to check.

P.S. – Try to keep react-router and react-router-dom of the same version.

npm info react-router-dom version

window.React.version

import React from 'react';
console.log(React.version);

• Did you try running the app in Incognito mode least to ensure there is no caching behind the issue ?

If you are through the above checks and noted all the findings, we are ready to go to the next steps.

Solution 1 :

• Let’s first pinpoint the version details. Be aware that from “react-router-dom” version 6, the “Switch” keyword was replaced by “Routes”. So the import had to be adjusted accordingly.

For React < V6
import { Switch } from "react-router-dom";

Change to

For React >= V6
import { Routes } from 'react-router-dom';

• Next React Router version 6 doesn’t support “exact” anymore. So make the adjustments accordingly. As per the official documentation – “You don’t need to use an exact prop on <Route path=”/”> anymore. This is because all paths match exactly by default. If you want to match more of the URL because you have child routes use a trailing * as in <Route path=”users/*”>.

( However if you are using Typescript, be aware that “exact” is no longer need in version-6 because it is default. But Standard

JavaScript ignores the extra parameter. Which is not the case with Typescript – so it will complain. )

For React < V6
<Route exact path="/" component={Home} />

Change to

For React >= V6
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
<Route path="/" element={<Home />} />

• There are changes to component syntax. See “WriteToUs” syntax from version 6.

Basically component = {ComponentName}

IS CHANGED TO

element={<ComponentName/>}

Example below –

For React < V6

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

Change to

For React >= V6

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

• From version 6 onwards, “Redirect”ing alone is done though the “Navigate” component with the “replace” prop specified.

<Navigate replace to="/" />

In case, you want to replicate react-router-dom version 5 “Redirect” component redirecting from a path, then you would have to combine with a “Route”. See below –

<Route path="/<path_name>" element={<Navigate replace to="/" />} />

• To summarize the imports in React-router-dom version 6

import { BrowserRouter as Router } from "react-router-dom";
import { Switch, Route, Routes } from "react-router-dom";

Solution 2:

If the steps in Solution 1 did not help you, you might try rolling back to earlier version . Although it is advisable to stay with the Latest or Updated version, but still if all else fails, you could try this.

More details about downgrading the version can be found in our post – “How To Fix Error – “Digital Envelope Routines::Unsupported” in Node.js or React ?” . See Option 2 in that post which explains about downgrading the version.

• Uninstall the current version

npm uninstall react-router-dom

• Install the previous version

npm install [email protected]

e.g.

npm install [email protected]

Hope this helps to solve the error.

Other Interesting Reads –

• How To Fix Error – “Digital Envelope Routines::Unsupported” in Node.js or React ?

• How To Fix – “Uncaught Error: Invariant Violation: Element Type is Invalid:” ?

• How To BuildCreate a Docker Image Using Different Options ?

• How To Access Spark Logs in AWS EMR ?

• How to Update or Upgrade Gradle version in Android Studio?

• How To Fix – “app:processDebugResources FAILED” in Android Studio ?

• How To Fix – “Error: No Toolchains Found in the NDK Toolchains Folder” in Android ?

• How To Fix – Error “ENOSPC: System Limit for Number of File Watchers Reached” ?

• How To Fix – “Error: Unable To Find Utility “Instruments”, Not A Developer Tool or In PATH” ?

• How to Fix – Uncaught TypeError: a.indexOf is Not a Function ?

• How To Fix – Error “SDK location not found” in Android, React Native or Flutter ?

• How to Send Large Messages in Kafka ?

• Fix Spark Error – “org.apache.spark.SparkException: Failed to get broadcast_0_piece0 of broadcast_0”

• How to Handle Bad or Corrupt records in Apache Spark ?

• How to use Broadcast Variable in Spark ?

• How to log an error in Python ?

 attempted import error 'switch' is not exported from 'react-router-dom' (imported as 'switch') ,attempted import error 'button' is not exported from 'react-router-dom' , ,attempted import error: 'usehistory' is not exported from 'react-router-dom'. ,react router-dom v6 ,attempted import error: 'usenavigate' is not exported from 'react-router-dom'. ,react-router-dom switch ,react-router-dom not working ,attempted import error: 'uselocation' is not exported from 'react-router-dom ,how to uninstall react-router-dom ,react router-dom routes ,attempted import error 'switch' is not exported from 'react-router-dom' ,attempted import error 'usehistory' is not exported from 'react-router-dom' ,attempted import error 'redirect' is not exported from 'react-router-dom' ,attempted import error 'withrouter' is not exported from 'react-router-dom' ,attempted import error 'usenavigate' is not exported from 'react-router-dom' ,attempted import error 'useroutematch' is not exported from 'react-router-dom' ,attempted import error 'uselocation' is not exported from 'react-router-dom' ,attempted import error 'useparams' is not exported from 'react-router-dom' ,attempted import error 'browserhistory' is not exported from 'react-router-dom' ,attempted import error 'switch' is not exported from 'react-router-dom' ,attempted import error 'usehistory' is not exported from 'react-router-dom' ,attempted import error 'redirect' is not exported from 'react-router-dom' ,attempted import error 'withrouter' is not exported from 'react-router-dom' ,attempted import error 'usenavigate' is not exported from 'react-router-dom' ,attempted import error 'useroutematch' is not exported from 'react-router-dom' ,attempted import error 'uselocation' is not exported from 'react-router-dom' ,attempted import error 'useparams' is not exported from 'react-router-dom' ,attempted import error 'browserhistory' is not exported from 'react-router-dom' , , ,Attempted Import Error: 'Switch' is Not Exported From 'react-router-dom' ,attempted import error 'switch' is not exported from 'react-router-dom' ,attempted import error 'button' is not exported from 'react-router-dom' ,attempted import error 'switch' is not exported from 'react-router-dom' (imported as 'switch') ,attempted import error 'switch' is not exported from 'react-router-dom'. error ,attempted import error 'switch' is not exported from 'react-router-dom'. in react js ,attempted import error 'switch' is not exported from 'react-router-dom'. react ,attempted import error 'switch' is not exported from 'react-router-dom'. v6 ,Attempted Import Error: Not Exported From 'react-router-dom' , ,Attempted Import Error: Not Exported From 'react-router-dom' ,attempted import error is not exported from 'react-router-dom' ,attempted import error 'switch' is not exported from 'react-router-dom' ,attempted import error 'usehistory' is not exported from 'react-router-dom' ,attempted import error 'redirect' is not exported from 'react-router-dom' ,attempted import error 'route' is not exported from 'react-router-dom' ,attempted import error 'withrouter' is not exported from 'react-router-dom' ,attempted import error 'usenavigate' is not exported from 'react-router-dom' ,attempted import error 'uselocation' is not exported from 'react-router-dom' ,attempted import error 'switch' is not exported from 'react-router-dom' (imported as 'switch') ,attempted import error 'redirect' is not exported from 'react-router-dom' (imported as 'redirect') ,attempted import error 'routes' is not exported from 'react-router-dom' (imported as 'routes') ,attempted import error 'navigate' is not exported from 'react-router-dom' (imported as 'navigate') ,attempted import error 'browser' is not exported from 'react-router-dom' (imported as 'router') ,attempted import error 'browserhistory' is not exported from 'react-router-dom' ,attempted import error 'browserrouter' is not exported from 'react-router-dom' ,attempted import error 'button' is not exported from 'react-router-dom' ,attempted import error 'container' is not exported from 'react-router-dom' ,attempted import error 'dropdown' is not exported from 'react-router-dom' ,attempted import error 'switch' is not exported from 'react-router-dom'. error ,attempted import error 'hashhistory' is not exported from 'react-router-dom' ,attempted import error 'history' is not exported from 'react-router-dom' ,attempted import error 'switch' is not exported from 'react-router-dom'. in react js ,attempted import error 'link' is not exported from 'react-router-dom' ,attempted import error 'linkcontainer' is not exported from 'react-router-dom' ,attempted import error 'use location' is not exported from 'react-router-dom' ,attempted import error 'match' is not exported from 'react-router-dom' ,attempted import error 'outlet' is not exported from 'react-router-dom' ,okta attempted import error 'useroutematch' is not exported from 'react-router-dom' ,attempted import error 'prompt' is not exported from 'react-router-dom' ,attempted import error 'privateroute' is not exported from 'react-router-dom' ,attempted import error '__routercontext' is not exported from 'react-router-dom' ,attempted import error 'routers' is not exported from 'react-router-dom' ,attempted import error 'routerlink' is not exported from 'react-router-dom' ,attempted import error 'switch' is not exported from 'react-router-dom'. react ,attempted import error 'usehistory' is not exported from 'react-router-dom'. react ,react attempted import error 'withrouter' is not exported from 'react-router-dom' ,attempted import error 'useroutematch' is not exported from 'react-router-dom' ,attempted import error 'useparams' is not exported from 'react-router-dom' ,attempted import error 'useroutes' is not exported from 'react-router-dom' ,attempted import error 'usesearchparams' is not exported from 'react-router-dom' ,attempted import error 'use prompt' is not exported from 'react-router-dom' ,attempted import error 'switch' is not exported from 'react-router-dom'. v6 ,attempted import error 'indexroute' is not exported from 'react-router-dom' ,attempted import error 'index link' is not exported from 'react-router-dom' , ,attempted import error '__routercontext' is not exported from 'react-router-dom' ,attempted import error 'browser' is not exported from 'react-router-dom' (imported as 'router') ,attempted import error 'browserhistory' is not exported from 'react-router-dom' ,attempted import error 'browserrouter' is not exported from 'react-router-dom' ,attempted import error 'button' is not exported from 'react-router-dom' ,attempted import error 'container' is not exported from 'react-router-dom' ,attempted import error 'dropdown' is not exported from 'react-router-dom' ,attempted import error 'hashhistory' is not exported from 'react-router-dom' ,attempted import error 'history' is not exported from 'react-router-dom' ,attempted import error 'link' is not exported from 'react-router-dom' ,attempted import error 'linkcontainer' is not exported from 'react-router-dom' ,attempted import error 'match' is not exported from 'react-router-dom' ,attempted import error 'navigate' is not exported from 'react-router-dom' ,attempted import error 'navigate' is not exported from 'react-router-dom' (imported as 'navigate') ,attempted import error 'outlet' is not exported from 'react-router-dom' ,attempted import error 'privateroute' is not exported from 'react-router-dom' ,attempted import error 'prompt' is not exported from 'react-router-dom' ,attempted import error 'redirect' is not exported from 'react-router-dom' ,attempted import error 'redirect' is not exported from 'react-router-dom' (imported as 'redirect') ,attempted import error 'route' is not exported from 'react-router-dom' ,attempted import error 'routerlink' is not exported from 'react-router-dom' ,attempted import error 'routers' is not exported from 'react-router-dom' ,attempted import error 'routes' is not exported from 'react-router-dom' (imported as 'routes') ,attempted import error 'switch' is not exported from 'react-router-dom' ,attempted import error 'switch' is not exported from 'react-router-dom' (imported as 'switch') ,attempted import error 'switch' is not exported from 'react-router-dom'. error ,attempted import error 'switch' is not exported from 'react-router-dom'. in react js ,attempted import error 'switch' is not exported from 'react-router-dom'. react ,attempted import error 'switch' is not exported from 'react-router-dom'. v6 ,attempted import error 'use location' is not exported from 'react-router-dom' ,attempted import error 'use prompt' is not exported from 'react-router-dom' ,attempted import error 'useblocker' is not exported from 'react-router-dom' ,attempted import error 'usecontext' is not exported from 'react-router-dom' ,attempted import error 'usehistory' is not exported from 'react-router-dom' ,attempted import error 'usehistory' is not exported from 'react-router-dom'. react ,attempted import error 'uselocation' is not exported from 'react-router-dom' ,attempted import error 'usenavigate' is not exported from 'react-router-dom' ,attempted import error 'useparams' is not exported from 'react-router-dom' ,attempted import error 'useroutematch' is not exported from 'react-router-dom' ,attempted import error 'useroutes' is not exported from 'react-router-dom' ,attempted import error 'usesearchparams' is not exported from 'react-router-dom' ,attempted import error 'useselector' is not exported from 'react-router-dom' ,attempted import error 'withrouter' is not exported from 'react-router-dom' ,attempted import error is not exported from 'react-router-dom' ,okta attempted import error 'useroutematch' is not exported from 'react-router-dom' ,react attempted import error 'withrouter' is not exported from 'react-router-dom' , , ,attempted import error 'button' is not exported from 'react-router-dom' ,attempted import error 'switch' is not exported from 'react-router-dom' ,attempted import error 'switch' is not exported from 'react-router-dom' (imported as 'switch') ,attempted import error 'switch' is not exported from 'react-router-dom'. error ,attempted import error 'switch' is not exported from 'react-router-dom'. in react js ,attempted import error 'switch' is not exported from 'react-router-dom'. react ,attempted import error 'switch' is not exported from 'react-router-dom'. v6 ,react attempted import error 'switch' is not exported from 'react-router-dom' ,react error attempted import error 'switch' is not exported from 'react-router-dom' ,react js attempted import error 'switch' is not exported from 'react-router-dom'

Sep 16, 2022 . Admin

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

import "bootstrap/dist/css/bootstrap.min.css";
import Post from './Post';

import React from "react";
import { Routes, Route, Link } from "react-router-dom";

function App() {
  return (
   <div>
       ....

        <div className="container mt-3">
          <Routes>
            <Route exact path={["/", "/tutorials"]} component={Post} />
            <Route exact path="/add" component={Post} />
            <Route path="/tutorials/:id" component={Post} />
          </Routes>
        </div>
    </div>
  );
}

export default App;

#React JS