出现“Uncaught TypeError: history.push is not a function”错误

Question

我一直在开发一个导航栏。我写了一个函数来切换屏幕并在按钮 onClick 中调用它。我也包裹了组件withRouter。但是出现以下错误：

未捕获的类型错误：history.push 不是函数”错误。

这是我的代码：

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

每个react-router-domv5 \xe2\x86\x92 v6 迁移

\n

旧的useHistory已被替换为useNavigate

\n

\n

@参见https://reactrouter.com/docs/en/v6/api#usenavigate

\n

\n

旧的 v5 代码：

\n

import { useHistory } from \'react-router-dom\';\n\nconst history = useHistory();\nhistory.push(`/Search?${queryString}`);\n

\n

新的 v6 代码：

\n

import { useNavigate } from \'react-router-dom\';\n\nconst navigate = useNavigate();\nnavigate(`/Search?${queryString}`);\n

\n

Answer 2

您已经用 包裹了Navigation组件withRouter，因此您需要通过组件的 props 访问历史对象。您可以选择分解道具，如下所示：

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;