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"
  },

Solution 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

Solution 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.

Solution 3

1. 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

2. Since you use react-router-dom v5 then your jsx

   <Routes>
      <Switch>
        <Route path="/" element={<App />} />
        <Route path="*" element={<Whoops404 />} />
      </Switch>
    </Routes>

should be replaced by

 <Router>
   <Switch>
        <Route path="/"><App /></Route>
        <Route path="*"><Whoops404/></Route>
    </Switch>
 </Router>

3. from below line remove Routes, i saw it on your imports, since you wont be using it, and its not even exported from react-router-dom v5 you're using, again its only on v6

import { Switch, Route, Routes } from "react-router-dom";

4. Just for best practice so your codes becomes clean, you can merge these two lines since they're from the same package

import { BrowserRouter as Router } from "react-router-dom";
import { Switch, Route, Routes } from "react-router-dom";

so they finally looks likes like

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

Comments

[Drew Reese]

Routes isn't exported in react-router-dom v5, it is part of v6, replacing the Switch component. Just remove the Routes component from your Pages component and use the Switch. Or upgrade to v6 (still in beta I believe so don't use for production code) and remove the Switch.

[Drew Reese]

Well, now you can know better that there is a Routes component: reacttraining.com/blog/react-router-v6-pre/#introducing-rout‌​es and github.com/ReactTraining/react-router/blob/dev/docs/…