Compiled with problems:X ERROR in ./src/route/AppRoute.js 12:37-43 export 'Switch' (imported as 'Switch') was not found in 'react-router'

Question

Compiled with problems:X ERROR in ./src/route/AppRoute.js 12:37-43 export 'Switch' (imported as 'Switch') was not found in 'react-router' (possible exports: MemoryRouter, Navigate, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createRoutesFromChildren, generatePath, matchPath, matchRoutes, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes)

My source code for using React:

In the command line the error shows up like so:

The items available in the folder are:

I tried googling and used this command, but still its not working and showing the same error as I said earlier:

command i tried to use but still facing the same issue:

Can you please provide me with what to do step by step?

Answer 1

Looks like you've accidentally upgraded/installed the latest version of react-router-dom, version 6. You've two options from here:

1. Downgrade/revert back to version v5.x

   Uninstall any current versions of react-router-dom and react-dom, and then install a specific v5 version of them.

   From your project directory run:

   • npm un -s react-router-dom react-dom
     

   • npm i -s react-router-dom@5.3.0 react-dom@5.3.0
     

2. Complete/apply the v5 migration guide

   Upgrading from v5

   If you decide to move forward with the migration then you'll likely want to uninstall react-router since react-router-dom re-exports all the exports from react-router, or at a minimum you want to ensure it's on the same version.

   Uninstall:

   npm un -s react-router
   

   Or reinstall latest of each:

   • npm un -s react-router-dom react-router
     

   • npm i -s react-router-dom@latest react-router@latest
     

Answer 2

In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from

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