Oticlichy
Oticlichy

Reputation: 9

I am having issues compiling my code with this error prompting after compilation

ERROR in ./src/App.js 30:41-47

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

Upvotes: 0

Views: 921

Answers (2)

user17775017
user17775017

Reputation:

Solution 1:

To Solve 'Switch' is not exported from 'react-router-dom' Error Here Just Install Switch. And then you can use Switch. Switch is replaced in react-router-dom version 6. So that you need to install react-router-dom version 5. Now, your error should be solved.

Use routes instead of Switch:

import {
  BrowserRouter,
  Routes, // Just Use Routes instead of "Switch"
  Route,
} from "react-router-dom";

Then You can use Like This:

    <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<Home />}>
          <Home/>
        </Route>
      </Routes>
    </BrowserRouter>

Solution 2:

Here Just Install Switch. And then you can use Switch. Switch is replaced in react-router-dom version 6. So that you need to install react-router-dom version 5. Now, your error should be solved.

npm install react-router-dom@5

Thanks

Upvotes: 0

Adtiya
Adtiya

Reputation: 23

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';

For more information, you can visit offical docs: react-router-dom-v6

Upvotes: 2

Related Questions