Question

我的app.js中有这个

      render() {
    //isAuthticated() is async, so we block the rendering until we have the result.
    if (!this.state.authenticationChecked) return null;
    return (
      <div>
        <Switch>
          <PrivateRoute name={"dashboard"} authed={this.state.isAuthenticated} path="/dashboard" render={(props) => <Calendario {...props} logout={this.logout} />} />
          <LifeExpectancyRoute name={"life_expectancy"} path="/lifeExpectancy" render={(props) => <LifeExpectancy {...props} setYearsRedirect={this.setYearsRedirect} />} />
          <Route path="/login" render={(props) => <LoginPage login={this.login} authed={this.state.isAuthenticated} {...props} />} />
        </Switch>
      </div>
    )
  }
}

export default compose(
  withRouter,
  connect(null, mapDispatchToProps)
)(App);

Ant，那么我具有单击图标时会调用的此功能

  logout = () => {
    this.setState({
      isAuthenticated : false,
      authenticationChecked: false
    }, () =>{
      this.props.history.push("/dashboard")
    })

  }

但是由于某种原因，它会推送历史记录，并且我可以在导航菜单中看到它，但是它不会加载该组件，我只有一个空白屏幕。如果我在导航栏中手动输入地址，则它可以正常工作

Answer 1

这是我的代码逻辑错误，确实可以解决问题

    logout = () => {
    this.setState({
      isAuthenticated : false,
      authenticationChecked: true
    }, () =>{
      this.props.history.push("/login")
    })

  }

反应路由器this.props.history.push，推送位置但不渲染组件

1 个答案: