Switch or Routes? Which is it with React Router?

I cannot use "Switch" or "Routes" with react router (specifically react-router-dom). Because there seems to be a bit of confusion about which one to use, Switch or Routes, I decided to try both to get try to get somewhere.

I am using react-router-dom version :

"react-router-dom": "^6.2.1",

If I import like this :

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

compiler says that Cannot resolve symbol 'Routes'

If I instead import Switch like this :

import { BrowserRouter as Router, Route, Switch} from 'react-router-dom'

then I get this error export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

Is this some bug in the version?

********** UPDATE ***********

I have rolled back to React Router/Dom version 5.2.0.

Version 6.x seems too broken.

For example in the @type module installing version 6.x installs the wrong types.

"name": "@types/react-router",
"version": "5.1.17",

This is wrong and confuses my IDE.

I don't think it's a bug in the version. The Routes component in v6 effectively replaced the Switch component from v5. v6.2.1 is the current version and after just checking it in a codesandbox it imports a Routes component without issue.

Try uninstalling react-router-dom and reinstalling it. Ensure you kill any development code watchers/hot reloaders.

npm uninstall -s react-router-dom react-router
npm install -s react-router-dom@latest

Then restart your development build.

npm start

This is not a bug. It's about react router version. Since version 6 is completely different from version 5 and uses Routes instead of Switches. You can still make your code work by downgrading to version 5 or if you want to work with the new version, follow the migration plan:

Upgrading from V5 to V6 react router

You need to upgrade all Switch tag elements to Route tag elements in V6 according to docs.

V5 code example:

    // This is a React Router v5 app
    import {
      BrowserRouter,
      Switch,
      Route,
      Link,
      useRouteMatch
    } from "react-router-dom";
    
    function App() {
      return (
        <BrowserRouter>
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/users">
              <Users />
            </Route>
          </Switch>
        </BrowserRouter>
      );
    }

This is the same app in v6:

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

Switch or Routes? Which is it with React Router?

Related

Recent Posts