React 实现页面刷新自动重定向到菜单页的路由异常解决

你遇到的路由渲染错乱，根源是在beforeunload事件回调中执行SPA路由跳转属于无效操作：

• beforeunload的触发时机是浏览器已判定要启动页面卸载流程的阶段，此时后续的所有异步JS执行、DOM更新、React路由匹配逻辑都会被立即中断，紧接着就会进入页面资源重载的流程
• 你在回调中调用的history.push仅在内存层面临时修改了地址栏的显示值，既来不及触发React路由的组件重渲染，也不会被浏览器持久化为重载完成后的真实访问路径
• 等浏览器重载完成、重新初始化React应用时，读取到的真实访问路径仍然是/myComponent，自然会渲染MyComponent组件，最终形成地址栏显示和实际渲染内容不一致的错乱状态

要实现"仅当用户在MyComponent页面触发浏览器刷新/重载时，自动重定向回菜单页"的效果，不能依赖页面卸载阶段的JS逻辑（因为该阶段所有操作都会被中断），可通过导航来源标记校验的方式实现：

• 给所有从SPA内部正常跳转进入MyComponent的场景打上会话级标记（选择sessionStorage存储标记，是因为它的生命周期和当前标签页绑定，关闭标签页后自动销毁，不会跨标签页造成标记污染，更符合同标签页内的导航判断场景）
• MyComponent组件挂载阶段第一时间校验标记：如果标记存在，说明是正常内部导航，正常渲染组件；如果标记不存在，说明是刷新重载、直接输入URL进入的场景，直接执行重定向回菜单页的逻辑

这种方式将路由判断逻辑放在应用正常运行的阶段执行，完全绕开了卸载流程的中断问题，不会出现渲染错乱。

1. 调整Menu.js的跳转逻辑 #

在SPA内部导航触发前，写入会话级的导航标记：

import React from "react";
import { useHistory } from "react-router-dom";

export default function Menu() {
  const history = useHistory();
  const handleClick = () => {
    // 标记本次MyComponent的进入是SPA内部导航，而非重载触发
    sessionStorage.setItem("isSPANavToMyComponent", "true");
    history.push("/myComponent");
  };
  return (
    <div>
      <h1>Menu Page</h1>
      <button onClick={handleClick}>Go to MyComponent</button>
    </div>
  );
}

2. 重写MyComponent.js的校验逻辑 #

删除原有的beforeunload事件监听代码，替换为挂载阶段的标记校验：

import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";

export default function MyComponent() {
  const history = useHistory();

  useEffect(() => {
    // 读取SPA导航标记
    const hasSPANavMark = sessionStorage.getItem("isSPANavToMyComponent");
    // 无标记说明是刷新/重载/直接访问URL的场景，直接重定向回菜单页
    if (!hasSPANavMark) {
      history.replace("/");
      return;
    }
    // 有标记说明是正常内部导航，清除标记避免后续误判
    sessionStorage.removeItem("isSPANavToMyComponent");
  }, [history]);

  return (
    <div>
      <h1>My Component Page</h1>
    </div>
  );
}

3. 路由配置保持不变 #

原App.js中的路由逻辑不需要做任何调整，可直接复用。

• 从菜单页点击按钮进入MyComponent：标记被正常写入，进入后校验通过，清除标记，正常渲染MyComponent内容
• 在MyComponent页面触发浏览器刷新：应用重载后MyComponent挂载，校验时无对应的SPA导航标记，自动重定向回菜单页
• 直接在地址栏输入MyComponent路径访问：同样无导航标记，自动重定向回菜单页

内容的提问来源于stack exchange，提问作者Slim