The error "Switch is not exported from 'react-router-dom' happens because you are using "react-router-dom" version v6 or later. The "Switch" method was renamed since v6 and replaced with the "Routes" method.

Problem

In earlier versions, the "react-router-dom" routing implementation would look similar to the following code: 

import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom";
import Home from "./Home";
import About from "./about";

export function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link>
        <hr />
        <Link to="/about">Large</Link>
        <hr />
      </div>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route exact path="/about">
          <About />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;
App.js with v5

However, "react-router-dom" v6 was a breaking change that introduced new constraints and methods for executing the same logic as above.

Solution

Let's see how the same logic as above would be implemented in "react-router-dom" version v6 and later as of writing this article.

import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import Home from "./Home";
import About from "./about";

export default function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link>
        <hr />
        <Link to="/about">About</Link>
        <hr />
      </div>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}
App.js with v6

As you can see, we replaced the "Switch" method with the "Routes" method and also modified how components are passed to the "Route" function through the "element" prop.

Nesting components inside the "Route" method is deprecated in v6 and later.

Conclusion

The "react-router-dom" v6 introduced a lot of new features along with a new hook-based API. However, in case you are concerned about migrating from an older version to v6, the community recommends waiting until they release the backward compatibility package for existing projects that are in v5. You can check their official upgrading from v5 documentation to see the status of the backward compatibility.

Thank you for reading and I will see you in the next one. Take a look at other featured articles in my blog.