'I am coming across Switch export error from react-router-dom
I am coming across the following error and cannot find a way out of it. Could anyone please help?
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams)
Solution 1:[1]
The error message is clear. In order to use react-router v6, you'll need to convert all your <Switch> elements to <Routes>. See #upgrade-all-switch-elements-to-routes.
Solution 2:[2]
Instead of using like this
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/users">
<Users />
</Route>
</Switch>
Use like this...
<Routes>
<Route path="/" element={<Home />} />
<Route path="users/*" element={<Users />} />
</Routes>
Read this docs: https://reactrouter.com/docs/en/v6/upgrading/v5
Solution 3:[3]
you can import like this:
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
here is codesandbox example for you :
https://codesandbox.io/s/react-router-basic-294mt?from-embed=&file=/example.js
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | slideshowp2 |
| Solution 2 | Manish Bhusal |
| Solution 3 | Mersad Mirgholami |
