'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