Ошибка "Uncaught TypeError: history.pu sh is not a function"

Question

Разрабатываю панель навигации. Я написал функцию для переключения экранов и вызова ее кнопкой onClick. Я также обернул компонент в withRouter. Но возникает следующая ошибка:

Uncaught TypeError: history.pu sh is not a function "error.

Это мой код:

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

function Navigation(history) {
  const abc = path => {
    history.push(path);
  };

return(
<button onClick={() => abc('/user')}>User</button>
);}

export default withRouter(Navigation);

Спасибо

Answer 1

Вы заключили компонент Navigation в оболочку withRouter, поэтому вам нужно будет получить доступ к объекту истории через свойства компонента. Вы можете деструктурировать свой реквизит, как показано ниже:

function Navigation({ history }) {
  const abc = path => {
    history.push(path);
  };

  return (
    <button onClick={() => abc('/user')}>User</button>
  );
}

export default withRouter(Navigation);

Поскольку вы работаете с функциональными компонентами, альтернативным способом работы будет использование хука useHistory, который избавит вас от лишних затрат. нужно обернуть ваш компонент withRouter:

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

function Navigation(props) {
  const history = useHistory();

  const abc = path => {
    history.push(path);
  };

  return (
    <button onClick={() => abc('/user')}>User</button>
  );
}

export default Navigation;

Answer 2

Вы должны уничтожить все реквизиты, например Navigation({ history })