CODEWITHSUNDEEP
reactjs
Pema Dorji
Pema Dorji

Reputation: 51

Export 'Switch' was not found in react-router-dom

how can i solve this problem Compiled with problems:

ERROR in ./src/App.js 20:37-43

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams)

I want help to solve this problem

Upvotes: 5

Views: 77186

Answers (9)

Ravi
Ravi

Reputation: 21

Problem: I encountered an issue with importing Switch and Route from react-router-dom in my React application. This issue arose due to changes in the library's API over different versions.

Solution: To resolve the import issue, I updated my code to align with the latest version of react-router-dom (v6). Here’s how I made the necessary changes:

Updated Imports:

I replaced Switch with Routes and Route in my App.js file. This change is necessary because Switch is no longer used in react-router-dom v6.

Before:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

After:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

Additionally, I removed the import for Switch as it's no longer part of react-router-dom v6.

Routing Setup: Instead of wrapping Route components with Switch, I now use the Routes component provided by react-router-dom v6. This component allows nesting of Route elements directly inside it.

Before:

<Switch>
  <Route path="/" component={Home} />
  <Route path="/dashboard" component={Dashboard} />
  <Route path="/settings" component={Settings} />
</Switch>

After:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/settings" element={<Settings />} />
</Routes>

Notice the change from component prop to element prop in each Route. This is the updated syntax required by react-router-dom v6.

Outcome:

After making these changes, the import errors related to Switch and Route were resolved. My application now correctly handles routing using react-router-dom v6 without any import issues.

Upvotes: 1

Sandhya Patel
Sandhya Patel

Reputation: 1

react-router-dom version 6 is not support the Switch, so you need to install react-router- dom version 5.

npm install [email protected]

Upvotes: 0

ANKIT LUHAR
ANKIT LUHAR

Reputation: 1

just check the latest dependencies in package.json

npm install react-router-dom@latest

then the issue will be resolved

Upvotes: 0

Ritika Sharma
Ritika Sharma

Reputation: 41

Instead of "Switch" use routes in app.js file.

Example:-

    import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
    import SignUpLocationStepOne from './components/signup/SignUpLocationStepOne';
    import Header from './components/header/Header';
    import Navigation from './components/header/Navigation';
    
    function App() {
      return (
        <Router>
        <div>
          <Navigation />
          <Routes>
            <Route path="/signup" component={SignUpLocationStepOne} />
            <Route path="/" exact component={Header} />
          </Routes>
    
        </div>
      </Router>
      );
    }

Upvotes: 0

infosunnysingh
infosunnysingh

Reputation: 21

If you are using react-router-dom version V6.0.0 then it will not work, so downgrade the version of the react-router-dom to be below V6 and run

npm install [email protected]

Upvotes: 2

user21888146
user21888146

Reputation: 1

import { BrowserRouter,Switch,Route } from 'react-router-dom';

Have try with this don't change BrowseRouter as Router

function App() {
  return (
    <BrowserRouter>
    <div className="App">
      <header className="App-header">
        <Nav />
        <Switch>
        <Route path='/home' Component={Home}/>
        <Route path='/about' Component={Aboutus}/>
        <Route path='/youtube' Component={Youtube}/>
        <Route path='/blog' Component={Blogs}/>
        <Route path='/gallery' Component={Gallery}/>
        </Switch>
        <Footer />
      </header>
    </div>
    </BrowserRouter>
  );
}

Upvotes: 0

safad kothikkal
safad kothikkal

Reputation: 141

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

// Use <Routes> instead of <Switch>

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
} from "react-router-dom";

<Router>
      <Link to='/home'>Home</Link>
      <Link to='/about'>About</Link>

      <Routes>
      <Route path='/home' element={<Home/>} />
      <Route path='/about' element={<About/>} />
    
      </Routes>
      </Router>

This will Solve your Error;

Upvotes: 14

Muskan Madaan
Muskan Madaan

Reputation: 61

If you are using react-router-dom version V6.0.0 then it will not work, so downgrade the version of the react-router-dom to be below V6 and run

    npm install [email protected]

or otherwise checkout the new version for new updates.

Upvotes: 6

Alireza Jahandoost
Alireza Jahandoost

Reputation: 130

Checkout the new version of react-router-dom. Switch has been replaced with Routes and some other things have been changed too. https://reactrouter.com/docs/en/v6/getting-started/overview

Upvotes: 2

Related Questions