React Router is a popular routing library used in React applications to manage navigation and provide seamless routing functionality. However, as with any library, updates and changes can occur over time, which can lead to errors because some features become depreciated.

One common error that you may encounter when implementing routing in React applications is the “‘Switch’ is not exported from ‘react-router-dom'” error.

This error occurs when you upgrade from an older version of React Router to a newer version (currently v6) without taking into account some deprecated components like <Switch>.

In this article, you will learn the causes of this error and how to fix it, ensuring smooth routing and navigation in your React applications.

What Causes the “‘Switch’ is not exported from ‘react-router-dom'” Error?

In React Router version 5 and earlier, the <Switch> component was used to wrap all routes in your React application. In React Router version 6, the <Switch> component has been deprecated and replaced with the <Routes> component.

The <Routes> component in React Router v6 provides a more declarative and flexible approach to routing compared to the deprecated <Switch> component.

So, if you have recently upgraded to React Router v6 (or a newer version) and are still trying to use the deprecated <Switch> component, you will encounter the “‘Switch’ is not exported from ‘react-router-dom'” error.

Switch' is not exported from 'react-router-dom error message
Switch’ is not exported from ‘react-router-dom’

2 Ways To Fix the “‘Switch’ is not exported from ‘react-router-dom'” Error

This error can be fixed in two ways depending on the desired approach and requirements of your project. The two ways are as follows:

  • Use <Routes> instead of <Switch>
  • Downgrade the react-router-dom version to 5 or below

1. Use <Routes> instead of <Switch>

One way to fix the “‘Switch’ is not exported from ‘react-router-dom'” error is to replace <Switch> with <Routes>.

Let’s take a look at an example of how to update your routing code from using the deprecated <Switch> component in React Router version 5 to the new <Routes> component in React Router version 6.

In React Router version 5:

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

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

export default App;

In the above code, we are using the <Switch> component to wrap our routes. However, in React Router version 6, we need to update our routing code to use the <Routes> component and follow the updated API.

Here’s how the same example would look in React Router version 6 and beyond:

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

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

export default App;

As you can see, we have replaced the <Switch> component with the <Routes> component, and each <Route> is now defined using the element prop instead of the component prop.

Advantages of Routes over Switch in React Router v6

With the release of React Router v6, the introduction of the <Routes> component has brought several advantages over the deprecated <Switch> component in previous versions.

Let’s look at some advantages of using <Routes> for handling routing logic in your React applications.

1. Improved Nested Routing

<Routes> allows for improved nested routing configurations compared to <Switch>. With <Routes>, you can define nested routes easily by nesting <Route> components within other <Route> components, making it more intuitive and organized to handle complex routing structures.

This can help simplify the management of routing logic in larger applications with multiple levels of nested routes.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />}>
    <Route path="/team" element={<Team />} />
    <Route path="/history" element={<History />} />
  </Route>
  <Route path="/contact" element={<Contact />} />
</Routes>
2. Dynamic Route Matching

<Routes> provides more flexibility in matching and rendering routes dynamically based on route parameters. This allows for more dynamic and data-driven routing in your application.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/users/:userId" element={<UserProfile />} />
  <Route path="/products/:productId" element={<ProductDetail />} />
</Routes>
3. Improved Error Handling

<Routes> provides improved error handling for unmatched routes. If a route is not found, <Routes> automatically renders a “Not Found” component or a custom error component that you can define.

This can help improve the user experience by gracefully handling invalid URLs or routes that do not exist in your application.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  {/* Error route */}
  <Route path="*" element={<NotFound />} />
</Routes>

2. Downgrade the react-router-dom version to 5 or below

If you prefer to continue using <Switch> in your project, you can fix the error by downgrading your react-router-dom version to 5 or below.

This may be a viable solution if you have an existing project that was built using an older version of React Router. You can do this by first uninstalling the latest version of React router you installed using the command below:

npm uninstall react-router-dom

You can now use this command to install the last major version that included the <Switch> component, which is version 5.2.0:

npm install [email protected]

Summary

In this article, you have learned about the error “‘Switch’ is not exported from ‘react-router-dom'” in React and explored a few ways to fix it. You also learned the advantages of using the newer <Routes> component over the deprecated <Switch> component.

When starting a new project, it is recommended to always use the latest version of React Router, as it offers significant improvements and continuous updates.

However, suppose you are working on an existing project, and do not have the time to update your code extensively to use the new React Router’s v6 syntax and components. In that case, continue using the older version of React Router that works with your code.

Now it’s your turn: Have you ever encountered this issue? How did you solve it? Are there any other approaches you used that are not covered in this article? Let us know in the comments!