管理自定义历史

Question

假设我们在应用中有 2 种类型的流程：

1. PageA → WizardStep1 → WizardStep2 → WizardStep3 → PageB
2. PageC → PageD → WizardStep1 → WizardStep2 → PageD

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

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

要求是：

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

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

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

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

流程 2 更像这样

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

问题

PageB 上的用户单击浏览器返回并希望看到 PageA，但我们转到上一步 WizardStep3（用于流程 1）

向导完成后，PageD 上的用户单击返回并希望看到 PageC，但我们返回向导。

我最初的想法

顺便说一句，我正在使用页面 A、B、C、D。为了使它更真实，假设流程 1 是用户正在填写应用程序，其中包含许多按步骤拆分的表单。完成后，您将无法返回并更改数据。 PageA 可以是启动向导的页面。 对于流程 2 - 想象一下个人资料编辑，其中 PageD 是个人资料，而 PageC 是任何前一页。

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

Answer 1

我无法添加 cmets，所以我回答。

我没有对此进行测试，但显然 React Router 有一个 history.go(n) 方法可以用来返回 n 次（例如 -3）

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

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