‘Switch’ is not exported from ‘react-router-dom’

The error ‘Switch’ is not exported from ‘react-router-dom’ occurs when we try to import the Switch component  react-router-dom but it is not found. Here is how we can fix it:

In react-router-dom version 6, Switch has been replaced by Routes. Therefore, we need to update the import statement from:

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

to

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

Finally, update the Route declaration from:

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

to

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

Please note that in react-router-dom version 6, we do not need to use the exact attribute in the Route declaration.

Here is an example of how to use the Routes component in our code:

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

In this example, we are using the Routes component to define the routes for our application. Each Route component specifies a path and an element to render when that path is matched. The element prop is used to specify the component to render for that route.

You may also like:

• Can Not Read Properties of Undefined Reading Map in React JS
• How to Make Image Slider In React
• How to Pass A Lot of Props in ReactJS