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

user_12384756 0
Viewed 659189

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;
reactjs
34 Answers

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

user_84334200

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

user_124657620

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

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 react-router-dom@5.2.0
user_158783500

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>
user_126150440

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>
  );
}
user_112998930

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";
user_129145120

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.

user_149541840

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="/" component={component} />
        <Route exact path="/path2" component={component2} />
        <Route exact path="/path3" component={component3} />
    </Routes>
</Router>
user_151457360

<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.

user_106766890

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>
user_106711680

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

And component with element

{componentName} with {}

user_86335730

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

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/>} />
user_84465810

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",
user_90860310

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

user_65488020

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.

user_157817750

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>
user_88176250

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

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 react-router-dom@5.2.0

user_145918240

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

npm uninstall react-router-dom
npm install react-router-dom@5.2

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.

user_182742230
user_131669390

I solved the problem like this:

yarn add react-router-dom@5,3,0
user_63944560 
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;
user_106796980

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

user_3884580

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.

user_107396430

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>
        );
    }
}
user_193495890

If you installed react-router and react-router-dom v6 beta, just uninstall like this:

npm uninstall --save react-router react-router-dom

And install it with this:

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

It is going to install the latest version that is not beta.

Then we just need to restart Visual Studio Code or whichever text editor you handle it with.

user_146456720

I got this error after installing react-router-dom v6.0.2.

Replacing Switch with Routes solved the issue:

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

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>
    );
}
user_55782920

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>
user_129004730

I have faced the same issue and I have removed react-router-dom and then reinstalled it.

The issue occurred because I have upgraded it to the latest version, i.e., react-router-dom v6 and then wanted to downgrade to the previous version, i.e., v5.

I was on Ruby on Rails project and using yarn to manage dependency you can use this command to remove and reinstall it:

yarn remove react-router-dom

yarn add react-router-dom

This should solve the issue.

user_6636600

I was facing the same issue as the issue poster. I tried all things like below:

  • uninstall and install react-router-dom
  • separately imported Switch from react-router-dom

But nothing really worked for me.

Kindly follow the below instructions. I am sure you will not get the error again.

Correct 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, Routes, Route, Link } from "react-router-dom";

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

export default App;

Note: Switch have been replaced with Routes and instead of using component, we need to use element.

user_168047670

I was also facing that issue and finally solved it, by arranging code. I am very new in React.

Following is my App.js code (class base component):

import logo from './logo.svg';
import './App.css';

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Navbar from './components/Navbar';
import News from './components/News';
import { BrowserRouter as Router, Route, Routes,Link } from 'react-router-dom'

export class App extends Component {
  static propTypes = {

  }

  render() {
    return (
      <>
        <Navbar/>
        <Router>
          <Routes>
            <Route path="/general"><News pageSize={3} country={'us'} category={'general'}/></Route>
          </Routes>
        </Router>
      </>
    )
  }
}

export default App
user_27853150
Related