Attempted import error: 'Switch' is not exported from 'react-router-dom'

Question

I don't know why I am getting this error and I can't find an answer for it anywhere. I have uninstalled the react-router-dom package and reinstalled it, but it continues to tell me that the switch module is not exported from react-router-dom. Here's my code.

The error I'm getting:

Attempted import error: 'Switch' is not exported from 'react-router-dom'.

Code

import React from 'react';
import './App.css';
import NavBar from './components/navbar.js';
import Footer from './components/footer.js';
import Home from './components/pages/homepage/home.js';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="app-container">
        <NavBar />
        <Switch>
          <Route path="/home" component={Home} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

Answer 1

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

You also need to update the Route declaration from

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

to

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

In react-router-dom, you also do not need to use the exact in the Route declaration.

For more information, you can visit the official documentation: upgrade to react-router-dom v6

Answer 2

If you are using react-router-dom v6, it looks like Switch has been replaced with Routes.

Answer 3

This is an example using react-router-dom V6

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

import '../styles/global.css'

import Layout from '../containers/Layout'
import Home from '../pages/Home'
import Login from '../containers/Login'
import RecoveryPassword from '../containers/RecoveryPassword'
import NotFound from '../pages/NotFound'

const App = () => {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route exact path="/" element={<Home/>}/>
          <Route exact path="/login" element={<Login/>}/>
          <Route exact path="/recovery-password" element={<RecoveryPassword/>}/>
          <Route path="*" element={<NotFound/>}/>
        </Routes>
      </Layout>
    </Router>
  );
}

export default App;

Answer 4

I also faced the same problem, and I searched towards the Internet so much, but I didn't get any answer according to my question.

So I uninstalled the version 6 of react-router-dom:

npm uninstall react-router-dom

And installed version 5.2.0 of react-router-dom:

npm install [email protected]

Answer 5

Syntax has changed

Old Syntax

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

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

New Syntax:

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

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

Answer 6

In react-router-dom v6, Switch has been replaced with Routes. Use this format:

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

<Router>
    <Routes>
        <Route exact path="/" element={<component />} />
        <Route exact path="/path2" element={<component2 />} />
        <Route exact path="/path3" element={<component3 />} />
    </Routes>
</Router>

Answer 7

If you are using version 6 of react-router-dom, use this

Also, please see here for reference : https://reactrouter.com/docs/en/v6/upgrading/v5#:~:text=single%20route%20config%3A-,//%20This%20is%20a%20React%20Router%20v6%20app,%7D,-This%20step%20is

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />}>
          <Route path="me" element={<OwnUserProfile />} />
          <Route path=":id" element={<UserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Outlet />
    </div>
  );
}

Answer 8

I was able to fix it by changing from Switch to Routes. So you should have something like this:

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

And also you need to change the import from Switch to Routes:

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

Answer 9

react-router-dom has updated to version 6. Now they have renamed the <Switch/> component to <Routes/>. There are also many changes.

You should spend sometime to read the documentation. Here is the link for react-router-v6-doc.

Answer 10

<Switch> is replaced by <Routes>

Before:

import { Route, Switch} from 'react-router'

<Router>
    <Switch>
        <Route />
        <Route />
    </Switch>
</Router>

Now:

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

<Router>
    <Routes>
        <Route />
        <Route />
    </Routes>
</Router>

Just use Routes instead of Switch.

Answer 11

Step 1: Upgrade to react 16.8+ and react-router-dom v5.2:

npm uninstall react-router-dom
npm install [email protected]

Step 2: Update the react-router-dom import statement.

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

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

Step 3: Upgrade the syntax and replace "Switch" with "Routes" and "component" with "element"

Change

<Switch>
    <Route path="/home" component={HomePage} />
</Switch>

to

<Routes>
    <Route path="/home" element={<HomePage/>} />
</Routes>

Alternatively you can also downgrade the react-router-version as suggested in other solutions.

However, rather than going backwards, I would suggest to upgrade to latest version of react-router-dom and its syntax.

Answer 12

Change from

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

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

to

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

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

Answer 13

Switch is exported from react-router and not react-router-dom (the same goes for Route I think).

Answer 14

I solved my error by changing the way I was rendering my routes to the use of the element.

To:

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" caseSensitive={false} element={<Login />} />
        <Route path="/register" caseSensitive={false} element={<Register />} />
        <Route path="/" caseSensitive={false} element={<Home />} />
      </Routes>
    </Router>
  );
};
export default R;

Basically before v6.*:

import React from "react";
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    <Router>
      <Switch>
        <Route path="/login">
           <Login />
        </Route>
       <Route path="/register">
           <Register/>
        </Route>

       <Route path="/">
           <Home/>
        </Route>
      </Switch>
    </Router>
  );
};
export default R;

After v6.*

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Home } from "./app";
import { Login, Register } from "./auth";
const R: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" caseSensitive={false} element={<Login />} />
        <Route path="/register" caseSensitive={false} element={<Register />} />
        <Route path="/" caseSensitive={false} element={<Home />} />
      </Routes>
    </Router>
  );
};
export default R;

Answer 15

In react-router-dom v6 Switch is Replaced with Routes.

And component with element

{componentName} with {}

Answer 16

You have to check npm package version first. To check, run npm info react-router-dom version.

If the package version is >= 6.0.0, you have to change

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

to

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

And also have to change

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

to

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

Answer 17

What is your react-router-dom version?

"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

If it is above one then you need to remove node-modules and reinstall node-module using npm install --save.

Answer 18

Write <Routes> instead of <Switch>.

Run this in the terminal:

npm install --save react-router react-router-dom

This helped me. Or check file package.json and add the following right after "react-dom": "^17.0.2",:

 "react-router": "^6.0.0",

Answer 19

If you are using react-router-dom v6, you have to change Switch to Routes as given in the example below:

Instead of importing Switch, import { Switch, ... } from 'react-router-dom';

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

Then, instead of using component = {ComponentName}, use element={<ComponentName/>} as shown below:

import { Routes, Route, ...} from 'react-router-dom';
    .
    .
    .  
    <Routes>
      <Route exact path='/' element={<Home/>}></Route>
    </Routes>

Answer 20

If you are using version 6 of react-router-dom, then you need to update Switch with Routes. The below syntax worked for me:

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import './App.css';
import Home from './components/Home';

function App() {
  return (
    <div>
      <Router>
        <Routes>
          <Route path="/" exact element={<Home />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Answer 21

I had the same issue. On the project terminal, type the following commands. You will not need to make any changes to your code.

1. npm uninstall react-router-dom

2. npm install [email protected]

Answer 22

Switch has been replaced by Routes.

Source from Update routing (react-router-dom syntax) #1386 (howtographql GitHub)

Answer 23

import {
      BrowserRouter as Router,
      Routes,
      Route,
      Link
    } from "react-router-dom";
    
    function App() {
      return (
        <>
        <Router className="App">
          <Navbar/>
          <Routes>
            <Route path='/'>
    
            </Route>
          </Routes>
        </Router>
        </>
      );
    }
    
    export default App;

Answer 24

If you are using a newer version of react-router-dom (for example, ^6.2.1 in my case) you should change <Switch> to <Routes> and use <Route> with the component={<SampleComponent />} parameter.

Particularly the code example below:

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

export default function AppRoutes() {
    return (
        <Routes>
            <Route exact path="/" component={<MyComponent />}>
            </Route>
        </Routes>
    );
}

Answer 25

A solution:

Delete the node_modules folder. In the package.json file, change the react-router-dom version (version 6 in my case) to "react-router-dom": "^5.2.1"

Then in the terminal run:

npm install to install the dependencies and then run npm start to relaunch

Answer 26

I solved the problem like this:

yarn add react-router-dom@5,3,0

Answer 27

This is actually not a problem with you or React or your code. It's just the updated version of react-router-dom. Replace the Switch by Routes.

That’s it. Just use Routes instead of Switch and it works fine.

Answer 28

In react-router-dom v6, the switch is replaced by the Routes. Below is the simple example to configure react-router-dom v6.

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

import Layout from './components/Layout';
import ProtectedRoute from './components/ProtectedRoute';
import LoginPage from './pages/LoginPage';
import WizardPage from './pages/WizardPage';
import RequestsPage from './pages/RequestsPage';

import './App.scss'

export class App extends React.Component {
    public render() {
        const sharedRouteProps = { exact: true, authenticationPath: '/login' };
        const wizardRouteProps = { ...sharedRouteProps, path: "/", component: WizardPage };
        const requestsRouteProps = { ...sharedRouteProps, path: "/requests", component: RequestsPage };

        return (
            <Layout>
              <Router>
                <Switch>
                    <Route exact path='/login' component={LoginPage} />
                    <ProtectedRoute {...wizardRouteProps} />
                    <ProtectedRoute {...requestsRouteProps} />
                </Switch>
              </Router>
            </Layout>
        );
    }
}

Answer 29

You simply have to do two things:

1. Replace Switch with Routes.
2. Use this Route tag

<Route path="/" element={<Component />} />

instead of this one:

<Route>
  path="/"
  <Component />
</Route>

Answer 30

use Routes instead of Switch if you are using react-router-dom version6