在条件下反应路由器自动重定向

Question

我们有一个应用程序(小部件)，允许用户通过多种支付方法购买货币。应用程序由多个步骤组成。用户通过小部件步骤导航，通过单击next->next按钮来完成购买。

例如，流可以如下所示：

1. 选择要购买的电流
2. 登录
3. 系统标识您是否返回客户，如果有必要，已经捕获的数据将跳过所有不需要的步骤，如文档验证和支付详细信息。
4. 如果需要数据丢失，系统将自动导航到相关屏幕。

随附客户流程图：

​

​

我正试图找出一个干净的方法来实现这一反应。最初，我考虑将责任委托给每个屏幕组件，以决定是否呈现自身或重定向到另一个屏幕，但似乎整个导航逻辑将分布在整个应用程序中，这并不理想。

我认为理想的情况是，我希望在我的应用程序中有一个位置来做出这些导航决定。例如，当客户单击Next应用程序状态进行分析时，将在要呈现的页面上作出决定。

请你建议一下实现这一目标的最佳方法是什么？

科技：react18，redux

Answer 1

您可以使用装饰模式。你可以在这里读到更多关于它的内容：

装饰设计模式

每个流程都可以抽象为一个函数。为实现每个阶段建立一个函数。每个函数都需要一个回调函数，这是下一个阶段函数，如果满足或不满足条件，将调用该回调函数。实际上，您正在执行函数调用。每个函数调用下一个函数。最后，您只需要在组件中调用一个函数。

下图可以帮助您理解解决方案。

​

​