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

Question

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;

I keep getting this error:

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

I tried uninstalling and installing the react-router-dom package. But I am still getting that error, How can I fix this?

Answer 1

In version 6 of the react-router-dom, the switch is replaced by a route. So what you have to do is to update the import from:

import { Switch, Route } from "react-router-dom";

To:

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

After that make sure you update the Route declaration from:

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

To:

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

For more information: upgrade to react-router-dom v6.

Answer 2

import it from material UI there will be no error