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

Posted 2023-02-22

【中文标题】重定向到 React 中的另一条路线时如何传递状态/道具？

【英文标题】：How to pass state/props when redirecting to another route in React?

【发布时间】：2017-02-12 07:52:24

【问题描述】：

我有一个注册表单，在用户注册后，它会重定向到电子邮件确认页面 (/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 传递到确认页面？

【问题讨论】：

使用 react-router github.com/ReactTraining/react-router

【参考方案1】：

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

如果您使用的是打字稿，请将类型添加到状态中：

interface State 
    value: string

const location = useLocation<State>()

【参考方案2】：

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

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)

【参考方案3】：

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

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

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

this.props.location.state.key

【参考方案4】：

我想通了。

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

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

  this.props.location.state.email

【讨论】：

非常感谢您发布您的答案，遇到了同样的问题

@Full-Hybrid 没问题！

值得注意的是，上下文在 React 中不稳定或不推荐使用。

如果页面刷新状态会丢失

有谁知道如何将函数作为道具传递。我收到一个 DataCloneError