限制后退按钮反应路由器

Question

我想限制对路由器的访问，并禁用了后退按钮。

例如，如果用户手动在浏览器选项卡上键入或单击除event/:eventId之外的URL，我希望将其重定向到event/:eventId

当前：

1. 用户访问event/1234/friends
2. 它被重定向到event/1234
3. 用户点击后退按钮，即可看到event/1234/friends。(应该而不是能够访问event/1234/friends(

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

所需：

1. 用户访问event/1234/friends
2. 它被重定向到event/1234
3. 禁用后退按钮，或者如果用户单击后退按钮，将无法访问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);
}

这里有一个代码沙盒：

https://codesandbox.io/s/keen-silence-47ztr

记住，你不能在桌面上复制它，只能在手机上复制。

我检查了StackOverflow上的几个线程，如1、2、3、4，但找不到正确的答案。我该如何做到这一点？

Answer 1

您可以简单地使用history.replace(而不是推送(

if (!!matches) {
const defaultPathname = `/event/${matches[1]}`;
//props.history.length = 1; //<---- probably not required
//window.location.replace(defaultPathname); //<---- not required
props.history.replace(defaultPathname); //<---- like this
}

编辑：的一些解释

push和replace之间的主要区别在于，push将在浏览器的历史记录中创建一个新条目，而replace仅替换当前状态。这样，您将不会发现"后退"按钮已启用。

一些参考：

1

2

3

4