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

user_16005370 0
Viewed 34257

I'm trying to use React router and routes but keep getting this error: Attempted import error: 'Routes' is not exported from 'react-router-dom'.

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"
  },
npm reactjs javascript
5 Answers

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.

user_148703380

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";
user_23508080
user_106323670

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

user_142763960

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

user_46103180
Related