Switch' Is Not Exported from 'React-Router-Dom'
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...
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"
},
3 Answers
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.
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
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
Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.
