[Solved]-React call from class to functional component. Error: Invalid hook call. Hooks can only be called inside of the body of a function component-Reactjs

React hooks can only be called in function components or custom React hooks. In order to use the navigate function you'll need to either create a wrapper component or a custom withNavigate HOC to pass navigate as a prop to your class component.

Wrapper

const MyComponentWithNavigation = props => {
  const navigate = useNavigate();

  return <MyClassComponent {...props} navigate={navigate} />;
};

Usage:

<Route path="..." element={<MyComponentWithNavigation />} />

HOC

const withNavigate = Component => props => {
  const navigate = useNavigate();

  return <Component {...props} navigate={navigate} />;
};

Usage:

const MyComponentWithNavigation = withNavigation(MyClassComponent);

...

<Route path="..." element={<MyComponentWithNavigation />} />

Accessing the navigate function

In your class component, access navigate from props.

this.props.navigate("/");