history.push error with Typescript & React-CodePudding

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

CodePudding user response：

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('/');
  }

CodePudding user response：

Idk how your routes are configured. But have you tried to get history from hook and remove the way you getting from props

const history = useHistory();

CodePudding user response：

If you're using React Router Dom > v6, you need to use useNavigate.

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

const navigate = useNavigate();

navigate('/route');

However, if not, you need to import useHistory as same as useNavigate in the example above.