Reactjs 限制后退按钮反应路由器

我想限制对路由器的访问并禁用“后退”按钮

例如，如果用户手动在浏览器选项卡上键入或单击

event/:eventId

之外的URL，我想将其重定向到

event/:eventId

当前：

用户访问

event/1234/friends

它被重定向到

事件/1234

用户单击“上一步”按钮，可以查看

事件/1234/friends

。（它应该不能访问

事件/1234/朋友

）

注意：此错误仅发生在移动设备上。您不能在桌面上复制它

期望的：

用户访问

event/1234/friends

它被重定向到

事件/1234

禁用后退按钮，或者如果用户单击后退按钮，将无法访问

event/1234/friends

这就是我的代码的样子

 const eventPathname = props.history?.location?.pathname;
  const matches = eventPathname.match(/^\/event\/([^/]+)\/.+$/);
  if (!!matches) {
    const defaultPathname = `/event/${matches[1]}`;
    props.history.length = 1;
    window.location.replace(defaultPathname);
    props.history.push(defaultPathname);
  }

下面是一个代码沙盒：

请记住，您不能在桌面上复制它，只能在移动设备上复制

---

我检查了StackOverflow上的几个线程，比如，，但找不到正确的答案。关于如何实现这一点有什么帮助吗？

您可以简单地使用

历史记录。替换
（而不是推送）

if（！！匹配）{
const defaultPathname=`/event/${matches[1]}`；
//props.history.length=1；//它似乎起作用了，但是为什么用
替换
而不是
推送
解决了这个问题？希望现在一切都好了？你能告诉我你有什么问题吗..它起作用了，非常感谢@gdh我为这个问题奋斗了好几天，谢谢！