React js history.push 未定义答案

【问题标题】：React js history.push is undefinedReact js history.push 未定义
【发布时间】：2020-04-10 06:24:46
【问题描述】：

我是 React.js 的新手，在这里我想创建一个简单的登录应用程序，所以登录成功后，我想更新父组件中的状态值并使用 history.push 重定向到其他页面。但是这里我有一个问题，因为push 是未定义的。

我打算在用户登录之前使用 isLoggedIn 的状态值来隐藏一些元素。

这是 Home.jsx 中的代码

class Home extends Component {
  state = {
    isLoggedIn: false,
  };

  handleIsLoggedIn = (value) => {
    this.setState({
      isLoggedIn: value,
    });
  };
  render() {
    return (
      <Router>
        <Fragment>
          <div className="navigation">
            <img src="../../drawable/jdl_logo.png" />
            <Link to="/member-list">Member</Link>
            <Link to="/override-list">Override</Link>
            <Link to="/">Login</Link>
          </div>
          <Route path="/" exact component={() => <Login onLogin={() => this.handleIsLoggedIn()} />} />
          <Route path="/member-list" component={MemberDashboard} />
          <Route path="/override-list" component={OverrideDashboard} />
        </Fragment>
      </Router>
    );
  }
}

这就是如何在 Login.jsx 中处理登录

loginUser = () => {
  Axios.post("http://private-6fdd31-intern1.apiary-mock.com/interns/login", this.state.user).then(
    (res) => {
      if (res.data.role === "admin") {
        this.onSuccessLogIn();
        this.props.history.push("/member-list");
      }
    },
    (err) => {
      console.log(err);
    }
  );
};

onSuccessLogIn = () => {
  this.props.onLogin(true);
};

【问题讨论】：

您是否将 history 作为道具传递给 Login.jsx？
@UtsavPatel 是的，我不知道如何在道具中传递它，已经找到答案了，谢谢！

标签： reactjs

【解决方案1】：

Login 没有收到来自Route 的history 属性。

您可以通过route props 管道传输它：

<Route
  path="/"
  exact
  component={
    routeProps => <Login {...routeProps} onLogin={this.handleIsLoggedIn} />
  }
/>

或者您可以使用withRouter HOC 包装Login，并默认导出以供使用。

【讨论】：