-1

when i install react-router dom version 5 error appers. I assume the error is caused by my react version, what can I do to fix it?

$ npm install [email protected]
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8.0" from @emotion/[email protected]
npm ERR!   node_modules/@emotion/react
npm ERR!     @emotion/react@"^11.8.1" from [email protected]
npm ERR!     node_modules/react-select
npm ERR!       peer react-select@"^5.0.0" from [email protected]
Amit Amar
  • 51
  • 1
  • 8

2 Answers2

1

Please try to run the npm command with --force, or --legacy-peer-deps

EXAMPLE: npm install react-router-dom --force
Ikram Akbar
  • 120
  • 3
  • 13
  • Thanks, the installation works!!, but I'm encountering a new problem that when I want to switch between routers I have to do a refresh – Amit Amar Sep 29 '22 at 13:25
  • read the react-router-dom documents carefully, and execute the code. thank you... – Ikram Akbar Sep 29 '22 at 13:39
  • i used to work with react router dom , but with react v17 , and now my react version is 18 , maybe this is the problem? – Amit Amar Sep 29 '22 at 14:23
  • "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-accessible-accordion": "^5.0.0", "react-dom": "^18.2.0", "react-router-dom": "^5.3.0", "react-scripts": "5.0.1", "react-select-async-paginate": "^0.6.2", "sass": "^1.54.9", "web-vitals": "^2.1.4" }, – Amit Amar Sep 29 '22 at 14:23
1

I'm encountering a new problem that when I want to switch between routers I have to do a refresh

import "../src/assets/sass/global.scss";
import { Header } from "./components/Header";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import { Favorite } from "./pages/Favorite";
import { WeatherApp } from "./pages/WeatherApp";

export function App() {
  return (
    <Router>
      <div className="app">
        <Header />
        <main className="container-app">
          <Switch>
            <Route component={Favorite} path="/favorite" />
            <Route component={WeatherApp} path="/" />
          </Switch>
        </main>
      </div>
    </Router>
  );
}```
Amit Amar
  • 51
  • 1
  • 8