close

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

Today We are Going To Solve Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ in ReactJs. Here we will Discuss All Possible Solutions and How this error Occurs So let’s get started with this Article.

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

  1. How to Fix Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ Error?

    To Fix Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ Error just Change Home to <Home/>. To solve the error you have to just update the import from import { Switch, Route } from "react-router-dom"; to import { Routes ,Route } from 'react-router-dom';And after it just change Home to <Home/> just like below. Change <Route path="/" component={Home} /> to <Route path='/welcome' element={<Home/>} /> And your error will be solved. Try this.

  2. Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

    To Fix Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ Error just Install react-router-dom version 5.2.0. Just uninstall react-router-dom version 6 by below command: npm uninstall react-router-dom And then install react-router-dom version 5.2.0 by using the given below command: npm install [email protected]

Solution 1 : Change Home to <Home/>

To solve the error you have to just update the import from

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

to

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

And after it just change Home to <Home/> just like below. Change

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

to

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

And your error will be solved. Try this.

Solution 2 : Install react-router-dom version 5.2.0

Just uninstall react-router-dom version 6 by below command:

npm uninstall react-router-dom

And then install react-router-dom version 5.2.0 by using the given below command:

npm install [email protected]

Solution 3 : Use the correct syntax

You have to use the correct syntax to solve this problem. So you can use the below syntax which will help you.

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

<Routes>
    <Route path="/home" element={<Home/>} />
</Routes>

Solution 4 : Replace <Switch>  by <Routes>

Just replace <Switch>  by <Routes> and your error will be solved. Replace it just like below:

import { Route, Switch} from 'react-router'

to

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

Conclusion

So these were all possible solutions to this error. I hope your error has been solved by this article. In the comments, tell us which solution worked? If you liked our article, please share it on your social media and comment on your suggestions. Thank you.

Also Read This Solutions

Leave a Comment