Attempted import error: 'Routes' is not exported from 'react-router-dom'

Question

I'm trying to use React router and routes but keep getting this error:

I have tried the following:

• deleting and re-installing react-router-dom and react-router.
• deleting node_modules folder and running npm install
• making sure react-router and react-router-dom are the same version
• Yes, I restarted my server after every attempt listed above.

here is my index.js code:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter as Router } from "react-router-dom";
import { Switch, Route, Routes } from "react-router-dom";
import Whoops404 from "./components/Whoops404";

function Pages() {
  return (
    <Routes>
      <Switch>
        <Route path="/" element={<App />} />
        <Route path="*" element={<Whoops404 />} />
      </Switch>
    </Routes>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Pages />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

package.json dependencies:

  "dependencies": {
    "@craco/craco": "^6.1.2",
    "@testing-library/jest-dom": "^5.13.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-axios": "^2.0.5",
    "react-dom": "^17.0.2",
    "react-player": "^2.9.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-spinners": "^0.11.0",
    "video-react": "^0.14.1",
    "web-vitals": "^1.1.2"
  },

Answer 1

As far as I know React router has no Routes component. I would say you can omit that component as there is no such comp used in their docs.

Similar example from docs: https://reactrouter.com/core/api/Switch

Answer 2

you have used 'npm i react-router-dom' to install the router. that does not come with Routes.

use 'npm i react-router-dom@next' to install the to be released version that comes with Routes.

Answer 3

as for your package.json seems you're still using react-router-dom v5

So you need to use Switch not Routes , Routes is only for react-router-dom v6

Answer 4

Check react-router-dom version of your project in package.json and read what documentation tells.

I used react-router-dom v6, so i replace "Switch" by "Routes" and that works for me.

https://reactrouter.com/docs/en/v6/getting-started/overview

Answer 5

Router is only available on version 5 of react-router-dom Either use Switch as alternative or upgrade your react-router-dom package

Answer 6

I have used 'npm i -D react-router-dom@latest' to solve the problem

Answer 7

You can't use Routes and Switch at once. Use only Routes if the version is 6+ and Switch for v5