重定向到 React 中的另一个路由时如何传递状态/props？

IT技术 reactjs react-router
2021-05-04 10:54:48

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

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

    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进入确认页面？

4个回答

我想到了。

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

并通过以下方式访问状态：

  this.props.location.state.email

我所做的在没有上下文对象的情况下传递数据是通过使用历史props，

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

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

this.props.location.state.key

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

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})
}

2021年

您还可以通过该组件从 react-router 重定向：

...
if (shouldRedirect) {
     return <Redirect to={"/some-path"} state={{ value: "hey"}}>
}
return <div>Welcome</div>

然后在新组件中使用它：

...
const location = useLocation()
const value = location.state.value

如果您正在使用typescript，请将类型添加到状态中：

interface State {
    value: string
}
const location = useLocation<State>()
其它你可能感兴趣的问题
上一篇您能否优化打印头运动以加快打印速度？ 下一篇什么时候应该使用 Redux Saga 而不是 Redux Thunk，什么时候应该使用 Redux Thunk 而不是 Redux Saga？