[Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

Hello Guys, How are you all? Hope You all Are Fine. Today I am facing following error while running my reactjs app Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ in ReactJs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ Error Occurs ?

I am facing following error while running my reactjs app.

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

How To Solve Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ Error ?

Solution 1: Replace Switch with Routes

If You are using React-Router-dom v6+ Then There is Switch is replaced with Routes So You Need to simply import Routes and Then You can Use It Here Is I am giving Example.

Before

import { Switch, Route } from "react-router-dom";
 # Working In Smaller than v6

import { Routes ,Route } from 'react-router-dom'; # Working in v6 And Above

---

Also You Need to update Route declaration

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

to

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

Now, Your error will be solved.

Here is V6 Example.

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" caseSensitive={false} element={<Login />} />
        <Route path="/register" caseSensitive={false} element={<Register />} />
        <Route path="/" caseSensitive={false} element={<Home />} />
      </Routes>
    </Router>
  );
};
export default R;

Solution 2: Downgrade react-router-dom

You Just need to Downgrade react-router-dom to 5.2.0 So that First of all Just Uinstall react-router-dom With the help Of This Command.

npm uninstall react-router-dom

And Then Install 5.2.0 with help of this command.

npm install react-router-dom@5.2.0

Now, Your error must be solved.

Here is before v6.* example.

import React from "react";
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    <Router>
      <Switch>
        <Route path="/login">
           <Login />
        </Route>
       <Route path="/register">
           <Register/>
        </Route>

       <Route path="/">
           <Home/>
        </Route>
      </Switch>
    </Router>
  );
};
export default R;

Summary

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• DeprecationWarning: Pattern %d{DATE} is deprecated due to the confusion it causes when used. Please use %d{DATETIME} instead