Question

我有一个流程，其中我预定一项服务的约会。 React Router用于导航。像这样的多个流程中，屏幕是不同的。每个流的前几个屏幕不需要用户登录，因此可以直接访问，而每个流的末尾的确认页面和其他类似屏幕都需要他登录。

因此，在那几组屏幕之前，我有我的注册页面，该页面内还有指向登录页面的链接。诸如“已经有用户？登录”之类的内容如果他未经身份验证，我必须将他带到此注册页面，并让他完成注册过程，然后再进一步。如果他已经登录，我将完全跳过此步骤，直接将他带到其他屏幕。我正在通过私人路线处理此问题，如下所示：

      <PrivateRoute
        exact
        path="/gift/shipping-options"
        toPath="/gift/register"
        {...this.props}
        component={ShippingOptions}
      />
      <PrivateRoute
        exact
        path="/gift/confirm"
        toPath="/gift/register"
        injectStripe
        component={GiftConfirmation}
        {...this.props}
      />
      <PrivateRoute
        exact
        path="/gift/purchase-complete"
        toPath="/gift/register"
        component={PurchaseComplete}
        {...this.props}
      />
      <Route
        exact
        path="/gift/register"
        render={() => (
          <Signup
            headerProps={{ showBackButton: true, showCloseButton: true }}
            footerProps={{ showItems: false }}
            headerText="CREATE AN ACCOUNT"
            showLoginLink
            loginPath="/gift/login"
            handleExitClick={() => {
              this.props.history.push('/');
            }}
            {...this.props}
          />
        )}
      />

三个/ gift路径是私有路径，如果未登录则将重定向到Signup

class PrivateRoute extends React.PureComponent {
  render() {
    const {
      component: Component,
      user,
      location,
      toPath,
      injectStripe,
      ...rest
    } = this.props; // eslint-disable-line react/prop-types
    if (!user.userData.id) {
      return (
        <Redirect
          to={{
            pathname: toPath || '/register',
            search: location.search,
            state: { from: this.props.location }, // eslint-disable-line react/prop-types
          }}
        />
      );
    } else {
      if (injectStripe) {
        return (
          <StripeProvider apiKey={Config.stripeApiKey}>
            <Component {...rest} />
          </StripeProvider>
        );
      }
      return <Component {...rest} />;
    }
  }
}

这部分工作正常，仅当我尚未登录时，我才进入身份验证流程。但是整个应用程序的每个屏幕上都有一个带有后退按钮的标题，单击该按钮应该可以将我带回到上一个屏幕。

现在，背面清楚地实现为

  handleBackClick() {
    this.props.history.goBack();
  }

但是我的问题是，如果用户实际通过该流程进行了注册，则在任何屏幕上单击“后退”按钮并在注册/登录后返回到这一点实际上将使他进入注册/登录页面，应该不会发生，而是应该在注册页面之前登陆屏幕，即如果他通过->注册->登录-> b或a->注册-> b-> c

从b返回时，他应该直接在a上。我在执行此操作时遇到了麻烦。在单击后检查流/上一路径并导航到a是一项艰巨的任务，因为在注册之前可能存在多个具有不同屏幕的流。做这样的事情（可能在路由级别重定向）的最佳方法是什么？谢谢

通过身份验证流程在屏幕之间路由

0 个答案: