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

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 2

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 exact path="/" element={<Home />}>
          <Home/>
        </Route>
      </Routes>
    </BrowserRouter>

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

Answer 3

如果您想使用Switch请安装 react-router-dom 版本 5。在 react-router-dom 版本 6 中替换了 Switch。

npm install react-router-dom@5

Answer 4

我试试这个，react-router-dom 的版本是“^5.3.0”，但仍然显示 Switch' 不是从 'react-router-dom' 导出的消息

Answer 5

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.

Answer 6

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 7

WHYYYYYYYYYYYY??????

these changes do nothing but add confusion