Question

我有一个注册表单，用户注册后，它会重定向到电子邮件确认页面（/确认），用户输入我通过电子邮件发送的确认码。当用户提交确认代码时，我想将代码和用户的电子邮件发送到服务器端。

我的注册表单代码（简化）：

    constructor(props){
          super(props);
          this.state = {
             email: '',
             password: '',
             errors: {},
          }
       }
    handleSubmit(e){
        e.preventDefault();
        this.props.userSignup(this.state).then(
            () => {
               this.context.router.push({
                  pathname: '/confirmation'
               })
            },

         )
   }
   render(){ ...

我不想在我的道路上添加任何参数。
如何将this.state.email传递到确认页面？

Answer 1

我明白了。

<div id="top">

和访问状态：

 this.context.router.push({
     pathname: '/confirmation',
     state: {email: this.state.email}  
 })

Answer 2

我在没有上下文对象的情况下传递数据的方法是使用历史记录，

this.props.history.push({
             pathname:"/shopdetail",
             state:{
                 key:"value"
              }
            });

在ShopDetail组件中，您可以访问对象，

this.props.location.state.key

Answer 3

如果您不想在刷新页面时丢失状态，可以使用本地存储：

handleSubmit() {
  localStorage.setItem('email',
  JSON.stringify(this.state.email));
               }

，然后从任何其他页面（可能在componentWillMount中）的本地存储中检索：

componentWillMount(){
  let email = '';
  if (localStorage && localStorage.getItem('email')) {
     email = JSON.parse(localStorage.getItem('email'));
    }
   this.setState({email: email})
}

如何在React中重定向到另一条路径时传递状态/道具？

3 个答案: