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

Hello everyone, when I created a new React js app using React V18.0.0 my routes component is not working any more

import React from 'react';import ReactDOM from 'react-dom';import { Route, Switch, Router} from 'react-router-dom';ReactDOM.render( <React.StrictMode> <Router> <Switch> <Route path="/" exact={true}> <p>Hello</p> </Route> </Switch> </Router> </React.StrictMode>, document.getElementById('root'));

I still getting error called

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

What should i do?

Comments

Mohamed Atef Date : 2022-04-02

Best answers

If you are using react-router-dom with version above V6.0.0 you will not be able to use this way again, so you can change the version of the react-router-dom to be below V6 in the package.json file and then run

npm update

or you can upgrade your code to be like

import React from 'react';import ReactDOM from 'react-dom';import { BrowserRouter as Router, Route, Routes, } from 'react-router-dom';import Home from './Views/Home';ReactDOM.render( <React.StrictMode> <Router> <Routes> <Route path="/" exact={true} element={<Home />} /> </Routes> </Router> </React.StrictMode>, document.getElementById('root'));

as you see Router is exported as BrowserRouter and Routes became instead of Switch
That's all, let me know if you have another questions

Jo Micheal Date : 2022-04-02

Thank you so much

Please Login or sign up to be able to write comment