Hey developers! Welcome to this quick solution. Many developers are puzzled by the "Switch is not exported from React Router DOM" error. Even after trying to fix it by uninstalling and reinstalling the react-router-dom package, even this problem persists.

So, in this solution, we will understand two methods to fix it in a simple and easy-to-understand manner. We will also know why this error occurs.

So let's begin!

Before looking at the solution, let us look at the problem code shared by a developer so that we can more easily understand how to fix the problem.

Problem

import './App.css';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

function App() {
  return (
    <Router>
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/about' exact component={About} />
        <Route path='/contact' exact component={Contact} />
      </Switch>
    </Router>
  );
}

export default App;

Solution 1:

To solve this issue, we need to use the 'Routes' component instead of 'Switch' in react-router-dom version 6. In this newer version, 'Switch' has been replaced with 'Routes'. We can define our routes inside the 'Routes' component. Additionally, it's important to update the route declaration accordingly.

Replace:

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

To:

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

And

<Route path='/' exact component={Home} />

To:

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

In the new version of react-router-dom, even if you don't use 'exact', there won't be any issue.

Complete Right code:

import './App.css';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import { BrowserRouter as Router, Route, Routes } 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>
  );
}

export default App;

Solution 2:

Another way to resolve this error is to install older versions that support 'Switch' for rendering components. The installation commands fetch the latest versions, so it's essential to download versions that are suitable for our requirements.

To fix this, you need to have version 5 of react-router-dom installed. You can install react-router-dom version 5 using the following command and resolve this issue without altering the 'Switch' component:

npm i react-router-dom@5.2.0

Once you've installed the older version of react-router-dom that supports 'Switch' to render components, your previous code will work properly.

Here's an example:

import './App.css';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

function App() {
  return (
    <Router>
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/about' exact component={About} />
        <Route path='/contact' exact component={Contact} />
      </Switch>
    </Router>
  );
}

export default App;

However, opting for the older version download method might not be the most beneficial approach because each update brings its own advantages. It's better to go for the latest version and make the necessary code replacements.

The first solution is perfect for everyone. I've provided two options because, as a developer, it's essential to be familiar with alternatives to become proficient.

You can install the latest react-router-dom version with this command:

npm install react-router-dom@latest

Why does this problem arise?

React-Router-Dom V6 brings many new features and better compatibility with the latest versions.

When we try to use 'Switch' from react-router-dom V6, we get an error saying 'Switch' is not exported. This is because in react-router-dom V6, 'Switch' is replaced with 'Routes', causing the error when trying to use 'Switch'.

If you want to check which version of react-router-dom is installed in your project, look into the package.json file.

With these two ways, you can easily remove this error: 'Switch is not exported from react-router-dom'.

If you have any more questions, feel free to ask them in the question box given below.