CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
satvir saini
satvir saini

Reputation: 61

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)

Upvotes: 5

Views: 47236

Answers (9)

therohantomar
therohantomar

Reputation: 469

You can do this way also in Your Index.jsx or main.jsx wrap BrowserRouter over App components

    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import App from './App'
    import './index.css'
    import {BrowserRouter } from "react-router-dom";

      ReactDOM.createRoot(document.getElementById('root')).render(
        <React.StrictMode>
         <BrowserRouter>
          <App />
        </BrowserRouter>
        </React.StrictMode>
      )

Now let's dive into App.jsx

    <Routes>
     <Route path="/" element={<Home />}/>
     <Route path="/contact" element={<Contact />}/>
     <Route path="/about" element={<AboutUs/>}/>
    </Routes>

Upvotes: 0

Nilesh Gore
Nilesh Gore

Reputation: 21

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

and use Routes insted of Switch

its work for this error and got exact solution..

Upvotes: 2

jlassi islem
jlassi islem

Reputation: 1

latest version of react-router-dom does not need a "switch" and the structure is different. The code will look like this.

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

is encapsul ated in and "exact" is not needed.

Upvotes: 0

Murtaza JAFARI
Murtaza JAFARI

Reputation: 734

If you are using react-router-dom v6+, then Switch is replaced with Routes. So you need to simply import routes and you can use it here.

Before working in smaller than v6:

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

Now, working in v6 And above

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

Also You Need to update Route declaration

<Route path="/" component={Home} />

to

<Route path='/home' element={<Home/>} />

Now, Your error will be solved.

Upvotes: 3

Anup Kumar
Anup Kumar

Reputation: 81

Try this one. It worked nicely for me :)

To import

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

Here is the way to implement your routes in App.Jsx file

const App = () => {
  const user = true;
  return (<Router>
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  </Router>);

Upvotes: 3

Jon Snow
Jon Snow

Reputation: 71

You can import like this,

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

and then replace <Switch> and </Switch> with <Routes> and </Routes>

Example code is here,

<Router>
    <Navbar/>
    <Routes>
      <Route exact path="/" element={<Home />} />
      <Route exact path="/about" element={<About />} />
    </Routes>
</Router>

Upvotes: 1

Manish Bhusal
Manish Bhusal

Reputation: 121

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

Upvotes: 6

Lin Du
Lin Du

Reputation: 102207

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.

Upvotes: 2

Mersad Mirgholami
Mersad Mirgholami

Reputation: 156

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

Upvotes: 0

Related Questions