开发者问题收集

发生“Uncaught TypeError: history.push is not a function”错误

2020-05-29
40160
javascript reactjs react-router

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

Uncaught TypeError: history.push 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);

谢谢

3个回答

根据 react-router-dom v5 → v6 迁移

旧的 useHistory 已被 useNavigate 取代>

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

旧 v5 代码： 

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

const history = useHistory();
history.push(`/Search?${queryString}`);

新 v6 代码：

556364714​​
gdibble
2022-04-06

您已使用 withRouter 包装了 Navigation 组件，因此您需要通过组件的 props 访问 history 对象。您可以选择解构您的 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;
wentjun
2020-05-29

试试这个，对我有用。
使用 history(path) 代替 history.push(path) 

function NavItem1(props) { //Navigate to the home page
  const history = useNavigate();

  const redirect = path => {
    history(path);
  };

  return (  
    <a href="#"  className="icon-button" onClick={() => redirect('/')} >
    {props.icon}
  </a>

  )
}
Raiden Choong
2021-12-19