React中如何避免页面刷新跳转首页时的当前页面重载问题

问题根源 #

1. 路由容器结构错误：routes.tsx里HashRouter被Switch包裹，不符合React Router的使用规范，路由上下文无法正确生效，导致路由匹配逻辑异常。
2. 无条件重定向逻辑缺陷：原BasePage中Layout内部的<Redirect push to="/homePage" />是无条件执行的，但它排在ContentRoute之前，刷新页面时浏览器会先匹配当前路径对应的ContentRoute并渲染组件，之后才执行重定向，因此出现“先加载当前页再跳转首页”的现象。

修正方案 #

步骤1：修复路由容器结构

修改routes.tsx，将HashRouter放在最外层包裹所有路由组件：

export default function Routes() {
  return ( 
    <HashRouter>
      <Switch>
        <BasePage />
      </Switch>
    </HashRouter>
  );
}

步骤2：创建刷新重定向组件

实现全局组件判断页面是否为刷新状态，若是则直接跳转到首页：

import { useEffect, useState } from 'react';
import { Redirect } from 'react-router-dom';

const RefreshRedirect = ({ children }) => {
  const [isRefreshed, setIsRefreshed] = useState(false);

  useEffect(() => {
    // 兼容现代浏览器的刷新判断逻辑
    const navigationEntry = performance.getEntriesByType('navigation')[0];
    if (navigationEntry?.type === 'reload') {
      setIsRefreshed(true);
    }
    // 兼容旧版浏览器可替换为：if (performance.navigation.type === 1)
  }, []);

  if (isRefreshed) {
    return <Redirect to="/homePage" />;
  }

  return children;
};

步骤3：调整BasePage路由逻辑

移除原无条件重定向，用RefreshRedirect包裹需要控制的路由，确保刷新时直接跳转，正常跳转时渲染对应页面：

<Switch>
  {/* 登录、OTP页面不受刷新重定向影响 */}
  <Route path="/login" component={Login} />
  <Route path="/otp" component={Otp} />

  {/* 其他页面统一受刷新重定向控制 */}
  <Route>
    <RefreshRedirect>
      <Layout>
        <Suspense fallback={<LayoutSplashScreen />}>
          <ContentRoute
            path="/homePage"
            component={RequestTabel}
          />
          <ContentRoute
            path="/Register"
            component={RegisterPage}
          />
          {/* 其他路由... */}
          {/* 路由不匹配时默认跳首页 */}
          <Redirect to="/homePage" />
        </Suspense>
      </Layout>
    </RefreshRedirect>
  </Route>
</Switch>

效果说明 #

• 刷新任意页面时，RefreshRedirect会在组件挂载初期检测到刷新状态，直接执行重定向，不会渲染当前路径对应的页面。
• 正常页面跳转（非刷新）时，路由匹配逻辑正常，可正常访问各页面。

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