I don't know why I am getting this error and I can't find an answer for it anywhere. I have uninstalled the react-router-dom package and reinstalled it, but it continues to tell me that the switch module is not exported from react-router-dom. Here's my code.
The error I'm getting:
Attempted import error: 'Switch' is not exported from 'react-router-dom'.
Code
import React from 'react'; import './App.css'; import NavBar from './components/navbar.js'; import Footer from './components/footer.js'; import Home from './components/pages/homepage/home.js'; import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; function App() { return ( <Router> <div className="app-container"> <NavBar /> <Switch> <Route path="/home" component={Home} /> </Switch> <Footer /> </div> </Router> ); } export default App; 32 Answers
In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from
import { Switch, Route } from "react-router-dom"; to
import { Routes ,Route } from 'react-router-dom'; You also need to update the Route declaration from
<Route path="/" component={Home} /> to
<Route path='/welcome' element={<Home/>} /> In react-router-dom, you also do not need to use the exact in the Route declaration.
For more information, you can visit the official documentation: upgrade to react-router-dom v6
12If you are using react-router-dom v6 it looks like Switch has been replaced with Routes
This is an example using react-router-dom V6
import React from 'react' import { BrowserRouter as Router, Route, Routes } from 'react-router-dom' import '../styles/global.css' import Layout from '../containers/Layout' import Home from '../pages/Home' import Login from '../containers/Login' import RecoveryPassword from '../containers/RecoveryPassword' import NotFound from '../pages/NotFound' const App = () => { return ( <Router> <Layout> <Routes> <Route exact path="/" element={<Home/>}/> <Route exact path="/login" element={<Login/>}/> <Route exact path="/recovery-password" element={<RecoveryPassword/>}/> <Route path="*" element={<NotFound/>}/> </Routes> </Layout> </Router> ); } export default App; I also faced the same problem, and I searched towards the Internet so much, but I didn't get any answer according to my question.
So I uninstalled the version 6 of react-router-dom:
npm uninstall react-router-dom And installed version 5.2.0 of react-router-dom:
npm install react-router-dom@5.2.0 Syntax has changed
Old Syntax
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; <Switch> <Route path="/home" component={Home} /> </Switch> New Syntax:
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; <Routes> <Route path="/home" element={<Home/>} /> </Routes> If you are using version 6 of react-router-dom, use this
Also, please see here for reference :
// This is a React Router v6 app import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom"; function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="users" element={<Users />}> <Route path="me" element={<OwnUserProfile />} /> <Route path=":id" element={<UserProfile />} /> </Route> </Routes> </BrowserRouter> ); } function Users() { return ( <div> <nav> <Link to="me">My Profile</Link> </nav> <Outlet /> </div> ); } In react-router-dom v6, Switch has been replaced with Routes. Use this format:
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom'; <Router> <Routes> <Route exact path="/" component={component} /> <Route exact path="/path2" component={component2} /> <Route exact path="/path3" component={component3} /> </Routes> </Router> react-router-dom has updated to version 6. Now they have renamed the <Switch/> component to <Routes/>. There are also many changes.
You should spend sometime to read the documentation. Here is the link for react-router-v6-doc.
1I was able to fix it by changing from Switch to Routes So you should have something like this:
<Routes> <Route path='/home' element={<Home/>} /> </Routes> and also you need to change the imort from Switch to Routes:
import { Routes, Route } from "react-router-dom"; <Switch> is replaced by <Routes>
Before:
import { Route, Switch} from 'react-router' <Router> <Switch> <Route /> <Route /> </Switch> </Router> Now:
import { Route, Routes} from 'react-router' <Router> <Routes> <Route /> <Route /> </Routes> </Router> Just use Routes instead of Switch.
0Change from
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; <Switch> <Route path="/home" component={Home} /> </Switch> to
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; <Routes> <Route path="/home" element={ <Home />} /> </Routes> You have to check npm package version first. To check, run npm info react-router-dom version.
If the package version is >= 6.0.0, you have to change
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; to
import { BrowserRouter as Router,Routes, Route, Link } from "react-router-dom"; And also have to change
<Route path="/home" component={Home} /> to
<Route path="/home" element={<Home/>} /> I solved my error by changing the way I was rendering my routes to the use of the element.
To:
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; Basically before v6.*:
import React from "react"; import { BrowserRouter as Router, Route, Switch} from "react-router-dom"; import { Home } from "./app"; import { Login, Register } from "./auth"; const R: React.FC = () => { return ( <Router> <Switch> <Route path="/login"> <Login /> </Route> <Route path="/register"> <Register/> </Route> <Route path="/"> <Home/> </Route> </Switch> </Router> ); }; export default R; After 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; in react-router-dom v6 Switch is Replaced with Routes
and component with element
{componentName} with {}
1Write <Routes> instead of <Switch>.
Run this in the terminal:
npm install --save react-router react-router-dom This helped me. Or check file package.json and add the following right after "react-dom": "^17.0.2",:
"react-router": "^6.0.0", Switch is exported from react-router and not react-router-dom (the same goes for Route I think).
If you are using react-router-dom v6, you have to change Switch to Routes as given in the example below:
Instead of importing Switch, import { Switch, ... } from 'react-router-dom';
import Routes import { Routes, ...} from 'react-router-dom';
Then, instead of using component = {ComponentName}, use element={<ComponentName/>} as shown below:
import { Routes, Route, ...} from 'react-router-dom'; . . . <Routes> <Route exact path='/' element={<Home/>}></Route> </Routes> If you are using version 6 of react-router-dom, then you need to update Switch with Routes. The below syntax worked for me:
import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import './App.css'; import Home from './components/Home'; function App() { return ( <div> <Router> <Routes> <Route path="/" exact element={<Home />} /> </Routes> </Router> </div> ); } export default App; I had the same issue. On the project terminal, type the following commands. You will not need to make any changes to your code.
npm uninstall react-router-domnpm install react-router-dom@5.2.0
What is your react-router-dom version?
"react-router": "^5.2.0", "react-router-dom": "^5.2.0", If it is above one then you need to remove node-modules and reinstall node-module using npm install --save.
Switch has been replaced by Routes
Source from Update routing (react-router-dom syntax) #1386 (howtographql GitHub)
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; function App() { return ( <> <Router className="App"> <Navbar/> <Routes> <Route path='/'> </Route> </Routes> </Router> </> ); } export default App; A solution:
Delete the node_modules folder. In the package.json file, change the react-router-dom version (version 6 in my case) to "react-router-dom": "^5.2.1"
Then in the terminal run:
npm install to install the dependencies and then run npm start to relaunch
I solved the problem like this:
yarn add react-router-dom@5,3,0 This is actually not a problem with you or React or your code. It's just the updated version of react-router-dom. Replace the Switch by Routes.
That’s it. Just use Routes instead of Switch and it works fine.
/*Step 1: Step 1. Upgrade to React 16.8+ and react-router-dom v5.2 npm uninstall react-router-dom npm install react-router-dom@5.2 /*Step 2: Update the react-router-dom import statement.*/ //Change 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" */ //Change // <Switch> // <Route path="/home" component={HomePage} /> // </Switch> //to <Routes> <Route path="/home" element={<HomePage/>} /> </Routes> //Alternatively you can also downgrade the react-router-version as suggested in other solutions, //However, rather than going backwards, I would suggest to upgrade to latest version of react-router-dom and its syntax. I got this error after installing react-router-dom v6.0.2.
Replacing Switch with Routes solved the issue:
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"; If you are using a newer version of react-router-dom (for example, ^6.2.1 in my case) you should change <Switch> to <Routes> and use <Route> with the component={<SampleComponent />} parameter.
Particularly the code example below:
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom'; import MyComponent from './containers/MyComponent'; export default function AppRoutes() { return ( <Routes> <Route exact path="/" component={<MyComponent />}> </Route> </Routes> ); } If you installed react-router and react-router-dom v6 beta, just uninstall like this:
npm uninstall --save react-router react-router-dom And install it with this:
npm install --save react-router react-router-dom It is going to install the latest version that is not beta.
Then we just need to restart Visual Studio Code or whichever text editor you handle it with.
I have faced the same issue and I have removed react-router-dom and then reinstalled it.
The issue occurred because I have upgraded it to the latest version, i.e., react-router-dom v6 and then wanted to downgrade to the previous version, i.e., v5.
I was on Ruby on Rails project and using yarn to manage dependency you can use this command to remove and reinstall it:
yarn remove react-router-dom
yarn add react-router-dom
This should solve the issue.
