CODEWITHSUNDEEP
reactjs
ajesamann
ajesamann

Reputation: 7780

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

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;

Upvotes: 770

Views: 1097638

Answers (30)

Mayank Jain
Mayank Jain

Reputation: 466

Simply do this

import { Routes as Switch } from 'react-router-dom';

In this way there is no need to make change to multiple places.

Upvotes: 0

Amirali Hatami
Amirali Hatami

Reputation: 136

It's depend on your version 'react-router-dom'. If your version is 5 you should use Switch, otherwise you should use Routes

version 5 :

    import {Switch} from 'react-router-dom';
    
const RouterComponent = ({children}) => {
  return(
         <Switch>
          {children}
         </Switch>
  )
}

version 6 :

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

const RouterComponent = ({children}) => {
  return(
         <Routes>
          {children}
         </Routes>
  )
}

Upvotes: 3

Syed Bilal Haider
Syed Bilal Haider

Reputation: 177

In the new setup, you're using the Routes component instead of Switch, and element instead of component in the Route definition. Here's how you can make the change:

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

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

This structure aligns with the latest version of React Router, where Routes is used as a wrapper for defining your routes, and each Route contains an element prop instead of component.

Upvotes: 3

Adrian
Adrian

Reputation: 253

Try this

npm install [email protected]

that works for me.

Upvotes: 1

17dev
17dev

Reputation: 251

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.

Upvotes: 15

Lakshani
Lakshani

Reputation: 51

In 'react-dom V6' Switch is not exist. Instead of 'Switch' , 'Routes' should useimport { Routes } from "react-router-dom";

Upvotes: 1

prabhat kumar jena
prabhat kumar jena

Reputation: 13979

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

Upvotes: 1383

Sepehr Codcup
Sepehr Codcup

Reputation: 31

In version 6 of react-router-dom, switch is no longer used and instead you can use the following example: import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

import { store } from './redux/store.js'
import { Provider } from 'react-redux'

import { Form } from "./component/Form/Form"
import { Navbar } from "./component/Navbar/Navbar"

import { Home } from "./pages/Home/Home"
import { AboutUs } from "./pages/AboutUs/AboutUs"
import { Products } from "./pages/Products/Products"
import { NotFound } from "./pages/NotFound/NotFound"
import { Dashboard } from "./pages/Dashboard/Dashboard"
import { PrivateRoute } from "./pages/PrivateRoute"

const App = () => {
    return (
        <Provider store={store}>
            <Router>
                <Navbar />
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/login" element={<Form />} />
                    <Route path="/" element={<Form />} />
                    <Route path="/products" element={<Products />} />
                    <Route path="/about-us" element={<AboutUs />} />
                    <Route element={<PrivateRoute />}>
                        <Route path="/dashboard" element={<Dashboard />} />
                    </Route>
                    <Route path="/*" element={<NotFound />} />
                </Routes>
            </Router>
        </Provider>
    )
}
export default App

Upvotes: 1

Suraj
Suraj

Reputation: 894

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>

Upvotes: 39

Shubham Kushwah
Shubham Kushwah

Reputation: 655

There has been a breaking change in the react-router-dom package recently. React Router v6 Changelog Permalink

So all you need is to rename the import like so...

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

Cheers!

Upvotes: 2

Omkar Bhavare
Omkar Bhavare

Reputation: 37

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

1st Method [replace Switch with Routes]

import { Routes , Route , Link } from 'react-router-dom';
<Routes>
 <Route exact path='/'>
  <HomePage />
 </Route>
</Routes>

2nd Method [downgrade your react-router-dom version to version 5 or below]

npm i [email protected]

Upvotes: 0

tomnyson
tomnyson

Reputation: 297

import React from "react";
import { Link, BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./App.css";
import App from "./App";
const RouterPage = () => {
    return (
        <Router>
            <div>
                <nav>
                    <Link to="/">Home</Link>
                    <Link to="/posts">Posts</Link>
                    <Link to="/">About</Link>
                    <Link to="/contact">Contact</Link>
                </nav>
                <Routes>
                    <Route exact path="/" element={<App />}></Route>
                    <Route path="/post" element={<App />} />
                    <Route path="/about" element={<App />} />
                    <Route path="/contact" element={<App />} />
                </Routes>
            </div>
        </Router>
    );
};

you should replace Switch to Routes

Upvotes: 3

Erij Maherzia BEN BRAHIM
Erij Maherzia BEN BRAHIM

Reputation: 61

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

Upvotes: 3

Muhammad Shazar
Muhammad Shazar

Reputation: 79

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>

Upvotes: 3

Madhav
Madhav

Reputation: 41

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

Upvotes: 3

Mateo Verdaguer
Mateo Verdaguer

Reputation: 349

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

Upvotes: 20

Usama Tayyab
Usama Tayyab

Reputation: 141

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

And component with element

{componentName} with {}

Upvotes: 10

Abhishek Yadav
Abhishek Yadav

Reputation: 95

Switch has been replaced by Routes.

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

Enter image description here

Upvotes: 6

luke.mas
luke.mas

Reputation: 2585

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

Upvotes: 256

AWS PS
AWS PS

Reputation: 4710

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>

Upvotes: 69

ANOOP NAYAK
ANOOP NAYAK

Reputation: 551

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

Upvotes: 16

moses saleh
moses saleh

Reputation: 91

I solved the problem like this:

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

Upvotes: 4

Khizr AA Shaikh
Khizr AA Shaikh

Reputation: 1207

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]

Upvotes: 119

Jude Okagu
Jude Okagu

Reputation: 307

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>

Upvotes: 11

Yahor M
Yahor M

Reputation: 797

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

Upvotes: 5

Hasnath abdullah aknd
Hasnath abdullah aknd

Reputation: 332

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.

Upvotes: 16

Md. Imrul Kayes
Md. Imrul Kayes

Reputation: 963

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]

Upvotes: 7

Ayemun Hossain Ashik
Ayemun Hossain Ashik

Reputation: 510

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.

Upvotes: 3

Engr Saddam Zardari
Engr Saddam Zardari

Reputation: 1049

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

Upvotes: 0

Sridhar Rajaram
Sridhar Rajaram

Reputation: 91

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.

Upvotes: 0

Related Questions