路由跳转问题（浏览器返回replace replaceState）

这篇文章的背景：

问题描述：
home zg 身份验证 是三个页面
从home进入来到zg页面，通过zg页面接口请求返回状态来判断是否需要进入身份验证页面
其中441的情况进入，进入之后身份验证进行验证，验证成功后重新返回zg页面并且重新拉取数据

浏览器返回堆栈情况会变成home – zg – 身份验证 --zg 当使用浏览器自带返回时，将进入后三者的死循环

产生原因：
浏览器的前进后退功能也是基于栈来实现的。
我们使用两个栈，stack1 和 stack2。我们把首次浏览的页面依次压入栈 stack1 。点击后退按钮时，从 stack1 中 pop 栈顶元素，并将其 push 到 stack2。而点击前进按钮时，从 stack2 中 pop 栈顶元素，并将其 push 到 stack1。
具体可以参考这篇博客看原理

根据以上问题的出现，我们可以考虑抹去身份验证的跳转痕迹来解决以上的问题。

这里会设计到操作浏览器历史记录的解决办法–history

DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问 (不要与 WebExtensions history搞混了)。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从 HTML5 开始——提供了对 history 栈中内容的操作。

官方的MDN移步此链接

HTML5 引入了 history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。

具体的history API 移步此处

针对上述问题，可以使用 history.replaceState()去修改当前的历史记录项

replaceState() 方法示例

假设 http://mozilla.org/foo.html 执行了如下 JavaScript 代码：

let stateObj = {
    foo: "bar",
};

history.pushState(stateObj, "page 2", "bar.html");
1
2
3
4
5

假设 http://mozilla.org/bar.html 执行了如下 JavaScript：

history.replaceState(stateObj, "page 3", "bar2.html");
1

这将会导致地址栏显示 http://mozilla.org/bar2.html,，但是浏览器并不会去加载bar2.html 甚至都不需要检查 bar2.html 是否存在。

假设现在用户重新导向到了 http://www.microsoft.com，然后点击了回退按钮。这里，地址栏会显示 http://mozilla.org/bar2.html。假如用户再次点击回退按钮，地址栏会显示 http://mozilla.org/foo.html，完全跳过了 bar.html。

以上可知，上方问题可使用replaceState解决

因为替换到url之后不会重新渲染，因此 采用history.go(0)的方式刷新当前页面

在身份验证结束之后，也是使用同样的办法回到zg列表页面

问题虽然解决了，但是遗留下了几个知识点

• navigate(path, { replace: true }) //跳转时不加入历史记录
• createHashHistory().replace

版本背景：react router V6

// v5
history.push('/home');
history.replace('/home');
 
 
// v6
navigate('/home');
navigate('/home', {replace: true});
1
2
3
4
5
6
7
8

createHashHistory

history 是 react-router 的核心依赖

github地址
history 源码分析- createHashHistory