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
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:
1 | import { Switch, Route } from "react-router-dom"; |
To:
1 | import { Routes, Route } from 'react-router-dom'; |
Additionally, you must alter the Route declaration.
From:
1 | <Route path="/" component={Home} /> |
To:
1 | <Route path='/' element={<Home/>} /> |
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..!! 🙂
Wow, this post is pleasant, my sister is analyzing these things, so I am going to let know her.