pc端浏览器回退什么时候回刷新页面？

Question

react项目，页面之间的跳转是用window.location.href，现在发现用浏览器回退到上个页面时谷歌浏览器下有些时候页面不会刷新，safari浏览器下稳定的不刷新，请问下这个刷新机制跟什么有关？前端怎么才能让返回的时候强制刷新呢？

Answer 1

用路由呀 react-router，window.location.href是会告诉浏览器打开新页面，打开新页面肯会刷新
useLocation Hook 里返回当前路由的 location 对象，这个对象变了你就可以刷新

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

function MyComponent() {
  const location = useLocation();

  useEffect(() => {
    // 路由变化时
    // 在这里强制刷新页面
    window.location.reload();
  }, [location]);

  // ...
}

用window.location.href 来跳页面的时候，浏览器会把这个行为看作是一个完全的页面加载。这会重加载并执行所有的 JS，HTML 和 CSS。整个 JS 的运行环境都会被重置， React 会开始重新运行。你返回上一个页面时候，浏览器可能会试着从缓存里加载页面（不同的浏览器可能有不同的行为），也可能会重新加载页面。

用 history.push（或者 React Router 的 <Link> 组件）来跳页面的时候，这个行为被看作是在单页面里的导航。你的 JS 环境不会被重置，你的 React 项目不会重新加载，只是渲染新的组件。在这个时候，返回上一个页面只是触发 React Router 根据新的 URL 渲染不同的组件，就不会触发浏览器的页面刷新。