CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Nika
Nika

Reputation: 123

React withRouter not importing

I am importing withRouter from react-router-dom but the browser shows me the error

export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom'

I know this is a syntax problem because React has upgraded to newer versions and there should be another replacement called something else instead of withRouter. I would appreciate it if anyone know what that new word is called.

Here is a screenshot. enter image description here

Upvotes: 0

Views: 2571

Answers (2)

Ardalan Farkhondeh
Ardalan Farkhondeh

Reputation: 76

This version doesn't support 'withRouter',instead, you can use some other properties such as useLocation, useNavigate, useParams

,then by using these are you can define 'withRouter ',also avoid to change version of react-router-dom. Use this code for solve the problem

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

Upvotes: 0

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18113

withRouter is not anymore in react-router v6 (see the migration guide).

You must use hooks instead :

Upvotes: 1

Related Questions