user image

Jo Micheal
Published in : 2022-04-02

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

React js

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?

web-brackets.com

Comments

Mohamed Atef Date : 2022-04-02

Best answers

46

Best answers

46

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

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

import link as router link from 'react-router-dom' Reactjs
Publish date: 2021-09-30 | Comments: 3

Tag: React js

Best way to update the state in one class component from the redux store?
Publish date: 2022-03-30 | Comments: 3

Tag: React js

Unexpected mix of '&&' and '||' Reactjs
Publish date: 2021-10-30 | Comments: 0

Tag: React js

[solved] Render/Show a custom option in Autocomplete Material UI?
Publish date: 2021-12-22 | Comments: 2

Tag: React js

useStyles Invalid hook call class component
Publish date: 2022-02-10 | Comments: 2

Tag: React js

[solved] Expected a conditional expression and instead saw an assignment
Publish date: 2021-11-29 | Comments: 0

Tag: React js