Export ‘Switch’ (Imported As ‘Switch’) Was Not Found In ‘React-Router-Dom’ With Example

December 2, 2022 XpertPhp

Hello guys, in this post, we will explain to you how to solve Export ‘Switch’ (Imported As ‘Switch’) Was Not Found In ‘React-Router-Dom’ With Example in react. we will give you a simple example of how to solve this error Export ‘Switch’ (Imported As ‘Switch’) Was Not Found In ‘React-Router-Dom’ With Example.

In react-router-dom v6, we need to change import Routes instead of Switch and instead of passing children prop to the Route components, we use the element prop. so you can follow the below example of react-router-dom v6.

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

we use the element prop instead of the component prop
<Route path="/" component={About} />
to
<Route path='/about' element={<About/>} />

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

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

we use the element prop instead of the component prop

If you are using react-router-dom v6, you must replace Switch with Routes. so that you can follow an example using react-router-dom V6.

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

import About from './pages/About';
import Product from './components/Product';

function App() {
  return (
    <Router>
      <Header />
      <main className="py-3">
        <Container>
          <Routes>
            <Route path='/about' element={<About/>} />
            <Route path='/product/:id' element={<Product/>} />
          </Routes>
        </Container>
      </main>
      <Footer />
    </Router>
  );
}

export default App;

import { Container } from 'react-bootstrap';

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

import About from './pages/About';

import Product from './components/Product';

function App() {

return (

</Routes>

</Container>

</main>

</Router>

);

}

export default App;

If you followed the example above and still face the same problem, you can uninstall react-router-dom version 6 and install the react-router-dom version 5.2.0. so you can follow the command below.

//uninstalled the version 6 of react-router-dom
npm uninstall react-router-dom

//install version 5.2.0 of react-router-dom
npm install react-router-dom@5.2.0

//uninstalled the version 6 of react-router-dom

npm uninstall react-router-dom

//install version 5.2.0 of react-router-dom

npm install react-router-dom@5.2.0