How To Fix - Attempted Import Error: Switch is Not Exported From React-router-dom ?

---

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

( 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={} 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 Build\Create 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'