Switch' is not exported from 'react-router-dom'

Question

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"
  },

Answer 1

Using Routes instead of Switch in react-router v6

You are using react-router-dom version 6, which replaced Switch with the Routes component

import {
  BrowserRouter,
  Routes, // instead of "Switch"
  Route,
} from "react-router-dom";

// ...

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>

Note that you now also pass your component as the element prop instead of using children.

Answer 2

if you want to use Switch then install react-router-dom version 5. Switch is replaced in react-router-dom version 6.

npm install react-router-dom@5

Answer 3

Users will not be able to find Switch in react-router-dom. They need to install versions up to 5 or below 5. Try the below one, which will work. If the user uses routes instead of Switch, it may not work.

npm install react-router-dom@5

Answer 4

You are using react-router@v6 which uses "Routes" instead of Switch. solution: -Replace "Switch" with "Routes" or -Downgrade your react-router to v5 using npm install react-router-dom@5

check https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-all-switch-elements-to-routes

Answer 5

This issue is caused by the version of react-router dom. So you don’t have to do much, you install the new versions by uninstalling the old react router dom, this will solve your problem. After uninstalling you don’t have to do much go to your react app folder and open the terminal by shift+right click. In the terminal, you run the code given below. This will uninstall your React Router Dom. check here how to do this ‘Switch’ is not exported from ‘react-router-dom’

Answer 6

Use Routes instead Switch. Switch no longer in react-router

Answer 7

in case it didn't work, I've been facing the same problem with a school project of mine, and I had to work with the version 6 of react router dom, therefore the solution was for each you should surround it with a tag instead of putting all your tags in a single tag. example from my own project:

const App = () => {
  return (
      <div className="App">
          <Routes>
          <Route path="/" element={<Navbar />} />
          </Routes>
          <Routes>
          <Route path="/" element={<Header />} />
          </Routes>
          <Routes>
          <Route path="/" element={<About />} />
          </Routes>
          <Routes>
          <Route path="/" element={<Contact />} />
          </Routes>
          <Routes>
          <Route path="/Signup" element={<Signup />} />
          </Routes>
      </div>
  )
}

//this will only work if you already run: npm install react-router-dom@6

Answer 8

I've also run into this error, somehow my React import was removed. So maybe you just have to see if you have imported react or not.