管理自定义历史记

Question

想象一下，我们在应用程序中有两种类型的流程：

1. PageS→WizardStep1→向导步骤2→向导步骤3→页面
2. 页面VS→PageD→向导步骤1→向导步骤2→PageD

在第1流程中，我们将用户重定向到不同的页面。注意 - 在第二个流程中，我们回到原始页面PageD。

每个页面和向导步骤都是不同的组件，并拥有自己的URL。当我们点击浏览器后退按钮时，我们会在浏览器的历史记录中导航回来。

要求是：

• 当我们点击任何向导步骤时，我们退后一步 - 这是正常行为（例如从WizardStep3返回到WizardStep2）
• 但是一旦完成向导，我们就无法回到向导

让我试着用不同的方式解释它：

1. PageA → [ WizardStep1 → WizardStep2 → WizardStep3 ] → PageB

方括号中的所有内容都是过程，一旦我们完成它，我们就不能再回到那个过程，我们应该跳过它。但如果我们没有完成向导，我们可以回去。

对于流程2，它更像是这样

2. PageC → PageD <-> [ WizardStep1 → WizardStep2 ]

问题

PageB上的用户单击浏览器并期望看到PageS，但我们转到上一步向导步骤3（对于流程1）

向导完成后页面上的用户单击返回并期望看到PageS，但我们回到向导。

我最初的想法

顺便说一句，我正在使用Page A，B，C，D。为了使它更真实，想象一下流1是用户填充应用程序，其中有许多表单按步骤分割。一旦完成，您就无法返回并更改数据。 PageA可以是启动向导的页面。对于流程2 - 想象一下配置文件编辑，其中PageD是Profile，PageC是任何以前的页面。

我知道在浏览器中我们无法删除历史记录，但我们可以计算步数并使用goBack（-COUNT）。对于流程2，它可以工作，而不是流程1.所以也许我们维护自己的历史，我们在那里弹出并推送URL，每当用户点击浏览器时，我们使用自定义历史记录并始终使用history.push作为浏览器，但是我不确定windown.onpopstate足够可靠。

Answer 1

我不能添加评论，所以我回答。

我没有测试过这个，但显然React路由器有一个history.go（n）方法你可以用来返回n次（例如-3）

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md

我希望这就是你要找的东西