问题描述
我有一个面向移动用户的 Web 应用程序，但由于我们的客户不想要移动应用程序，因此它是使用 React 开发的。我已经使用 React Router 实现了应用内路由。我使用 useHistory 钩子，所以基本上使用历史对象进行导航。我想让应用内导航和浏览器导航保持同步。
现在的要求是我有一个付款页面。当用户完成支付程序后，用户将无法返回支付过程中涉及的任何页面。或者简单地如果用户点击后退按钮，他应该登陆主页。所以我想清除历史记录，这样用户就无法回去了。但似乎没有办法清除历史记录。
如果有人知道任何解决方案，请告诉我。
解决方法
通常在购买流程中，您应该使用重定向 (history.replace) 来逐步浏览付款页面。如果用户然后按下后退按钮，那么他们将向后导航到他们之前所在的页面，然后他们进入“受限导航流程”。
或者，您可以尝试使用 Prompt：
用于在离开页面之前提示用户。当你的
应用程序进入一个状态，应该阻止用户
导航离开（就像一个表格填写了一半），呈现一个 <Prompt>。
查看 Preventing Transitions 演示。
您可以使用它来捕获在“受限导航流”中执行后退导航的尝试，然后阻止导航或强制重定向到您选择的路线，即 history.replace("/") 将用户跳转到所有返回主页的方式。