reactjs - React js history.push 未定义

Question

我是 React.js 的新手，在这里我想创建一个简单的登录应用程序，所以在登录成功后，我想更新 Parent 组件中的状态值并使用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);
};

标签： reactjs

Answer 1

Login没有收到history来自 的道具Route。

您可以通过route props将其通过管道：

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

或者您可以Login使用withRouterHOC 包装并默认将其导出以供使用。