Attempted import error: 'Switch' is not exported from 'react-router-dom'

reactjs

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.

Error I'm getting: Attempted import error: 'Switch' is not exported from 'react-router-dom'.

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;
`

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";

import { Routes ,Route } from 'react-router-dom';

You also need to update the Route declaration from

<Route path="/" component={Home} />

<Route path='/welcome' element={<Home/>} />

In react-router-dom, you also not need to use exact in Route declaration.

For more information, you can visit offical docs: upgrade to react-router-dom v6

If you are using react-router-dom v6 it looks like Switch has been replaced with Routes

I also faced the same problem, and I search towards the internet so much but I didn't get any answer according to my question.

So I uninstall the version 6 of react-router-dom

npm uninstall react-router-dom

And installed version 5.2.0 of react-router-dom

npm install [email protected]

Attempted import error: 'Switch' is not exported from 'react-router-dom'

Related

Recent Posts