'Using one HOC for multiple Components (ReactJs)

I want to use "useParams" and "useNavigate" but my components are class component and I can't use "useParams" and "useNavigate". so I had to make HOC to access them. but I can't use a single HOC for two or three components at the same time. this is my HOC (withRouter):

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

export const withRouter = (WrappedComponent) => (props) => {
  const params = useParams();
  const navigate = useNavigate();

  return <WrappedComponent {...props} params={params} navigate={navigate} />;
};

in my showMovie an movieForm I exported them like below:

 export default withRouter(ShowMovie);

and

 export default withRouter(MovieForm);


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source