反应如何正确处理成功页面？

Question

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

注册后，我必须显示“注册成功”页面。

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

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 ），但我不希望用户能够手动访问该路由，因为该路由仅在之后显示成功注册。

Answer 1

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

this.props.location.state 

在成功页面中提供传递的状态对象