如何在组件中访问历史记录道具WillMount

Question

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

主页.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
   }
}

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

注册.js

signInHandler = () => {
    this.props.history.push({
        pathname:'/',
        state: {
            triggerSignInComponent: true
        }
    });
}
<button onClick={this.onSubmitHandler}>Register</button> 
<button onClick={this.signInHandler}>Sign In</button>

我希望登录组件在用户切换登录处理程序后立即显示。如果用户被重定向到主页进行登录，如何更改主页的状态？我在主页.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
        })
    }
}