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

0 votes

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;

I keep getting this error:

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

I tried uninstalling and installing the react-router-dom package. But I am still getting that error, How can I fix this?

May 15, 2022 in Others by Kichu
• 19,050 points
5,173 views

2 answers to this question.

0 votes

In version 6 of the react-router-dom, the switch is replaced by a route. So what you have to do is to update the import from:

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

To:

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

After that make sure you update the Route declaration from:

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

To:

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

For more information: upgrade to react-router-dom v6.

answered May 17, 2022 by narikkadan
• 63,700 points
0 votes
import it from material UI there will be no error
answered Sep 1, 2022 by anonymous

Related Questions In Others

0 votes
3 answers

error "VT-x is not available (VERR_VMX_NO_VMX)."

Either the VT-x is disabled in the BIOS ...READ MORE

answered Oct 27, 2020 in Others by Diksha
• 140 points

edited Oct 27, 2020 by Gitika 1,284 views
+1 vote
0 answers
0 votes
1 answer

HTTP Error 403.14 - Forbidden - The Web server is configured to not list the contents of this directory

Try keeping this into your web config ...READ MORE

answered Feb 11, 2022 in Others by Rahul
• 9,670 points
11,988 views
0 votes
1 answer

How can I remove a port from url for node app using nginx

If you run your node server on ...READ MORE

answered Apr 10, 2018 in DevOps on Cloud by ajs3033
• 7,300 points
3,759 views
0 votes
4 answers

ReactJS vs Angular Comparison: Which is better?

Parameters React Angular Type React is a JavaScript library, and it ...READ MORE

answered Jan 7, 2021 in Events & Trending Topics by Focusteck
• 140 points
1,327 views
+2 votes
4 answers
0 votes
1 answer

Ceon SEO URl gives the error page not found in zen cart

in the admin section there is  an ...READ MORE

answered Feb 18, 2022 in Others by narikkadan
• 63,700 points
335 views
0 votes
1 answer

Yoast plugin is not showing meta description and meta keyword can i get an answer

function set_head_keywords() { $id ...READ MORE

answered Feb 20, 2022 in Others by narikkadan
• 63,700 points
374 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP