时间戳

首页 > 解决方案 > React，如何正确处理成功页面？

javascript - React，如何正确处理成功页面？

问题描述

如何正确处理成功页面行为？

注册后，我必须显示一个注册成功页面。

到目前为止我已经尝试过：

1. 注册表格和注册成功页面的路线相同，因此如果他们进入该/sign-up路线，Sign Up表格将显示出来。

在我的注册组件中，视图取决于注册状态，

if signUp === success render Success Page
else render Sign Up Form

这样做的问题是，Sign Up同一页面的标题中有一个按钮，如果我点击它，它仍然存在，success view因为注册和成功共享一条路线。

<Button onClick={this.navigateToSignUp} />

2.为注册成功页面制作了另一条路线

我为注册成功页面（ /sign-up-success ）制作了单独的路线，但我不希望用户能够手动访问该路线，因为它应该只在成功注册后显示。

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

看起来您希望通过脚本而不是通过链接本身来加载页面。试试下面的技巧。您可以通过链接或 history.push() 轻松传递状态。因此，通过状态传递一些布尔值并使用该状态值来验证链接是手动加载（通过输入，无状态）还是自动（由您的代码重定向，是状态）。

this.props.location.state

在您的成功页面中给出传递的状态对象

推荐阅读