[SOLVED] history.push error with Typescript & React

Issue

I am currently working with React and TypeScript.
Here is my problem:
When I try to do a history.push, it returns an error like this:
Uncaught (in promise) TypeError: history.push is not a function

Here is my code:

interface Props extends 
WithTranslation {
  history: any;
}

const Menu: React.FC<Props> = ({
  history
}) => {
  if (await MarketplaceRequests.sessionsTest()) {
      history.push({
        pathname: '/',
      });
  }

return ......

Thank you in advance

Solution

I think in react-router-dom v6 useHistory doesn’t work or its deprecated. Instead use useNavigate:

import {useNavigate} from 'react-router-dom'

const navigate = useNavigate()

const Menu: React.FC<Props> = ({
  navigate
}) => {
  if (await MarketplaceRequests.sessionsTest()) {
      navigate('/');
  }

Answered By – ask4you

Answer Checked By – Robin (BugsFixing Admin)