history.push error with Typescript & React

Question

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

I believe this has been answered here, stackoverflow.com/questions/62082869/… — Abel Masila
– Abel Masila, Commented Mar 25, 2022 at 10:36

ask4you · Accepted Answer · 2022-03-25 13:26:52Z

3

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

edited Mar 25, 2022 at 13:26

answered Mar 25, 2022 at 12:33

ask4you

8186 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felipe Gouvêa · Accepted Answer · 2022-03-25 12:33:34Z

1

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.

answered Mar 25, 2022 at 12:33

Felipe Gouvêa

2054 silver badges12 bronze badges

Collectives™ on Stack Overflow

history.push error with Typescript & React

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related