what will be the withRouter equivalent in react-router-v6 to component that is "connected" (to borrow redux terminology) to the router?

Mamunur Rashid 0
Viewed 24

I am using react-router v6,

withRouter is not supported by the react-router v6,

previously I was using export default connect(mapStateToProps)(withI18n(withRouter(Main))) in react-router-v5

I am trying to find the equivalent props in the react-router v6.

unfortunately I did not find a equivalent props in the react-router v6. What will be the withRouter equivalent in v6?

react-router-dom reactjs javascript
1 Answers

All you have to do is create a new HOC wrapper, as mentioned in their FAQ

// withRouter.js

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

export default withRouter
hgb1230
Related