Cannot import Switch component from react-router-dom in WebStorm [duplicate]

Question

I am using React-Router in WebStorm. I cannot import Switch component from "react-router-dom"

-

I deleted all node_modules and re-install npm. But it didn't solve the issue. react-router-dom version is 6.2.2

Answer 1

<Switch> was removed sine version 6 see upgrade-to-react-router-v6

Upgrade all <Switch> elements to <Routes> React Router v6 introduces a Routes component that is kind of like Switch, but a lot more powerful. The main advantages of Routes over Switch are: All <Route>s and <Link>s inside a <Routes> are relative. This leads to leaner and more predictable code in <Route path> and <Link to> Routes are chosen based on the best match instead of being traversed in order. This avoids bugs due to unreachable routes because they were defined later in your <Switch> Routes may be nested in one place instead of being spread out in different components. In small to medium-sized apps, this lets you easily see all your routes at once. In large apps, you can still nest routes in bundles that you load dynamically via React.lazy

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

    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </Router>