Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

‘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:

Reactjs Guru
Reactjs Guru

Welcome to React Guru, your ultimate destination for all things React.js! Whether you're a beginner taking your first steps or an experienced developer seeking advanced insights.

React tips & tutorials delivered to your inbox

Don't miss out on the latest insights, tutorials, and updates from the world of ReactJs! Our newsletter delivers valuable content directly to your inbox, keeping you informed and inspired.

Leave a Reply

Your email address will not be published. Required fields are marked *