ReactJS TypeError：无法读取未定义的属性“推送”答案

【问题标题】：ReactJS TypeError: Cannot read property 'push' of undefinedReactJS TypeError：无法读取未定义的属性“推送”
【发布时间】：2020-04-20 22:17:00
【问题描述】：

我构建我的应用程序并学习 ReactJS

到目前为止，我的代码错误，我尝试在互联网和论坛上搜索但无法修复。这是我的代码：

logout(){
    localStorage.removeItem("token");
    localStorage.clear();
    if(localStorage.getItem('token') === null){
        this.props.history.push('/login')
    }
}

错误：TypeError：无法读取未定义的属性“push”

请帮帮我

【问题讨论】：

你的错误信息是Cannot read property 'push' of undefined，这意味着this.props.history不存在，用于调试首先控制台this.props.history
你能分享更多你的代码吗？喜欢整个组件
您是否将组件包装在 withRouter HOC 中。 example from docs
嗨，props.history 里面没有值。它的类型现在是未定义的。此链接可能会有所帮助net-informations.com/js/iq/unerror.htm

标签： reactjs react-router push navigateurl

【解决方案1】：

我的猜测是你的logout 是在一个不是 Route it self 的组件中。我的意思是你没有做<Route path="/" component={ComponentThatHasLogoutMethod} />

只有用作 Route 的组件才有 history 属性。如果您需要其他一些嵌套组件中的那些，您可以使用来自react-router-dom 的withRouter 高阶组件

export default withRouter(ComponentThatHasLogoutMethod)

这会将 history 属性传递给您的组件，并且您不会得到 null。

【讨论】：

【解决方案2】：

带有反应钩子的解决方案示例：

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

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    localStorage.removeItem("token")
    localStorage.clear()
    if(!localStorage.getItem('token')){
      history.push("/login")
    }
  }

  return (
    <button type="button" onClick={handleClick}>
      Login
    </button>
  );
}

您可以在文档中找到更多信息 https://reacttraining.com/react-router/web/api/Hooks/usehistory

【讨论】：

【解决方案3】：

我在创建自定义门户以显示注销/登录等模型时遇到了类似问题。

const App = () => {
  const [modal] = useSelector(({ modal }) => [modal])
  return (
    <>
      <Portal modal={modal} />  
      <BrowserRouter>
        <Routes />
      </BrowserRouter>
    </>
  );
}

export default App;

正确的方式- Portal 必须是 BrowserRouter 的子节点。

const App = () => {
      const [modal] = useSelector(({ modal }) => [modal])
      return (
        <>
          <BrowserRouter>
            <Portal modal={modal} />  
            <Routes />
          </BrowserRouter>
        </>
      );
   }

更多参考请参见Router。

【讨论】：

【解决方案4】：

对于这个问题，我们有两种解决方案——：

用粗箭头符号声明替换函数声明，即 -:

  logout = () => {
        localStorage.removeItem("token");
        localStorage.clear();
        if(localStorage.getItem('token') === null){
            this.props.history.push('/login');
        }
    }

我们可以在构造函数中绑定logout函数-:

  constructor(props){
      super(props);
      this.logout = this.logout.bind(this);
  }

【讨论】：