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

You may encounter the following error `'Switch' is not exported from 'react-router-dom'` when working on routing using `react-router-dom`. So today we will show you how to fix the routing error in React.

Checkout more articles on ReactJS

• Open an input file on a button click in React
• How to create tabs in React
• Create a tags input component in React
• How to add a loading spinner in React

Error

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

When we try to import `Switch` from the `react-router-dom` v6 (Version 6) package, we'll get the above error. Let's have a look at what we can do about it.

Solution

The `Switch` has been replaced with `Routes` in `react-router-dom` v6.

From:

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

To:

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

Additionally, you must alter the Route declaration.

From:

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

To:

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

You don't have to use the `exact` in the Route declaration in the `react-router-dom`.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂