CODEWITHSUNDEEP
javascriptreactjsnpm
Hammaad
Hammaad

Reputation: 353

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

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:

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

Upvotes: 13

Views: 61866

Answers (10)

Trinh Hieu
Trinh Hieu

Reputation: 805

To update to v6, uninstall the old version using the following command:

npm uninstall react-router-dom

then run the following command to install the latest v6:

npm install react-router-dom

Then exit the command and run npm start again

Check out this great article

https://einternet.net/2024/01/05/how-to-fix-attempted-import-error-routes-is-not-exported-from-react-router-dom/

Upvotes: 0

Sylvain Codes
Sylvain Codes

Reputation: 135

First, you need to upgrade your React Router DOM version to the latest. And v6.16 is great. So:

  1. Install react-router-dom v6.16:
npm i [email protected]
  1. Import this to App component:
import { BrowserRouter, Routes, Route } from "react-router-dom";

Upvotes: 0

aldoprogrammer
aldoprogrammer

Reputation: 81

In my case, I just need to restart the server, then it works fine.

Upvotes: 1

Gena Zhukov
Gena Zhukov

Reputation: 1

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

Upvotes: 0

Richard Chimama
Richard Chimama

Reputation: 11

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

Upvotes: 1

Saurav Gami
Saurav Gami

Reputation: 129

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

Upvotes: 0

ndotie
ndotie

Reputation: 2150

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

Upvotes: 4

belem
belem

Reputation: 389

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

Upvotes: 0

zShan
zShan

Reputation: 101

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.

Upvotes: 10

Jirka Svoboda
Jirka Svoboda

Reputation: 418

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

Upvotes: -1

Related Questions