CODEWITHSUNDEEP
node.jsreactjs
Swapnil Chaure
Swapnil Chaure

Reputation: 1

ERROR in ./src/routes/index.js 14:35-41export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

I am trying to run my react app. I am getting following error

ERROR in ./src/routes/index.js 14:35-41 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_HistoryRouter, unstable_useBlocker, unstable_usePrompt, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit)

My index.js code is:

`import React from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import LoginPage from '../components/auth/LoginPage';
 import RegistrationPage from '../components/auth/RegistrationPage';
 import ProfilePage from '../components/user/ProfilePage';
 import ListingsPage from '../components/listings/ListingsPage';
 import ListingDetailsPage from '../components/listings/ListingDetailsPage';



 function Routes() {
   return (
     <Router>
       <Switch>
         <Route exact path="/login" component={LoginPage} />
         <Route exact path="/register" component={RegistrationPage} />
         <Route exact path="/profile" component={ProfilePage} />
         <Route exact path="/listings" component={ListingsPage} />
         <Route exact path="/listings/:id" component={ListingDetailsPage} />
      </Switch>
    </Router>
   );
 }

 export default Routes;`

your text I have deleted the node_modules folder and reinstalling all dependencies by running npm install again.

I upgraded version of react-router-dom to the latest version by running npm install react-router-dom@latest.

Upvotes: 0

Views: 146

Answers (1)

Zack
Zack

Reputation: 293

react-router-dom v6 has replaced Switch with Routes.

Instead of using and importing <Switch>, use and import <Routes>.

Upvotes: 0

Related Questions