ERROR in ./src/TopScroll.js 31:21-31 export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom'

Question

App.js

import Projects from "./pages/Projects"
import Experience from "./pages/Experience"
import About from "./pages/About"

import TopScroll from './TopScroll.js'

import Pilly from "./pages/ProjectFolder/Pilly"
import StegHide from "./pages/ProjectFolder/StegHide"

import { 
  BrowserRouter as Router, 
  Route, 
  Routes, 
  Link, 
  Redirect,
} from "react-router-dom"

function App() {
  return (
    <Router>
      <TopScroll>
      <Routes>

        {/* main pages */}
        <Route exact path="/">
          <Projects />
        </Route>

        <Route exact path="/experience">
          <Experience />
        </Route>

        <Route exact path="/about">
          <About />
        </Route>

        {/* project pages */}
        <Route exact path="/pilly">
          <Pilly />
        </Route>
        <Route exact path="/steghide">
          <StegHide />
        </Route>
        
      </Routes>
      </TopScroll>
    </Router>
  );
}

export default App;

TopScroll.js

import React, { useEffect, Fragment } from 'react';
import { withRouter } from 'react-router-dom';

function TopScroll({ history, children }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return <Fragment>{children}</Fragment>;
}

export default withRouter(TopScroll);

I have the following versions of the dependencies: react → ^18.2.0 react-dom → ^18.2.0 react-router-dom → ^6.21.1

Can you please tell me why I am getting the following error: ERROR in ./src/TopScroll.js 31:21-31 export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom' ?

Answer 1

Issue Explained

As Derek mentioned withRouter is no longer in the react-router-dom library

Solution

You can read details about it and see examples here.

This is a snippet from their example, which says you just need a wrapper instead:

import {
  useLocation,
  useNavigate,
  useParams,
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

https://reactrouter.com/en/main/start/faq#what-happened-to-withrouter-i-need-it