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?

Mohamed Atef

2 Apr 2022

Best Answer

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

Replies

Jo Micheal

2 Apr 2022

Thank you so much

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

Comments

Replies