如何访问 componentWillMount 中的历史道具？

Question

在我的主页中，我有一个存储注册和登录按钮的组件。

Homepage.js

state = {
    triggerSignInComponent: false
}

render() {
   return {
    this.state.triggerButtons ? 
      <div>
        <Link to='/register'>
          <button>Register</button>
        <Link/>

        <button onClick={this.toggleSignInHandler}>Sign In</button>
      </div> : null
   }
}

• 如果用户点击登录，该组件将调用登录组件。
• 如果用户点击注册，他们将被重定向到注册组件。但是，如果他们改变主意，则会有一个登录按钮，可将用户重定向回主页并切换登录组件。

Register.js

signInHandler = () => {
    this.props.history.push({
        pathname:'/',
        state: {
            triggerSignInComponent: true
        }
    });
}

<button onClick={this.onSubmitHandler}>Register</button> 

<button onClick={this.signInHandler}>Sign In</button>

我希望在用户切换 signInHandler 后立即显示登录组件。如果用户被重定向到主页进行登录，我如何更改主页的状态？我在 Homepage.js 中尝试了以下内容：

componentWillMount = () => {
    if(this.props.location.state.triggerSignInComponent) {
        this.setState({
            triggerSignInComponent: true
        })
    }
}

但是，这不起作用，因为在第一次调用组件时未定义 prop。

Answer 1

尝试将 this.props.location.state.triggerSignInComponent 更改为 this.props.location.triggerSignInComponent

componentWillMount = () => {
    if(this.props.location.triggerSignInComponent) {
        this.setState({
            triggerSignInComponent: true
        })
    }
}