React项目中已登录用户点击浏览器返回时刷新首页的方案咨询

你之前的代码报错是因为history.goBack() 方法本身没有返回值，执行后返回void，所以用if(rollback)做真值判断会直接抛出类型错误，这个逻辑本身是行不通的。

你项目用的是自定义history实例的react-router v5版本，可以直接用history内置的阻塞跳转能力实现需求，核心逻辑是：当用户处于登录态、且当前在首页（路径为/）时，监听到浏览器前进后退触发的跳转动作，直接阻止默认回退，刷新当前页面即可。

有两种实现方式可选：

1. 首页组件内实现（更推荐，耦合度低） #

直接在/pages/private/Home首页组件内加跳转监听，代码示例：

import { useEffect } from 'react';
import history from '../utils/history'; // 替换为你项目中history实例的实际路径

const Home = () => {
  // 替换为你实际的登录态判断逻辑，比如从状态管理、localStorage取id判断
  const isLogin = !!localStorage.getItem('id');

  useEffect(() => {
    if (!isLogin) return; // 未登录不做拦截
    // 注册跳转阻塞监听
    const unblock = history.block((transition) => {
      // 判断场景：当前在首页，且是浏览器前进/后退触发的跳转（动作类型为POP）
      if (history.location.pathname === '/' && transition.action === 'POP') {
        // 先取消阻塞，避免影响后续操作
        unblock();
        // 刷新当前首页，如果你只想刷新数据不需要重载页面，这里可以替换为首页拉取数据的方法
        window.location.reload();
        // 返回false取消默认的回退跳转
        return false;
      }
      // 其他跳转场景正常放行
      return true;
    });
    // 组件卸载时取消阻塞监听，避免影响其他页面跳转
    return () => unblock();
  }, [isLogin]);

  // 原有首页业务逻辑不变
  return <div>首页原有内容</div>
}
export default Home;

2. 路由层全局实现 #

如果不想改首页代码，也可以在路由配置组件AppRoutes里加全局监听：

import React, { Suspense, lazy, useEffect } from 'react';
import { Route, Router, Switch } from 'react-router-dom';
import history from '../utils/history';

import LoadingPage from '../components/organisms/LoadingPage';

const DownloadExams = lazy(() => import('../pages/private/DownloadExams'));
const Home = lazy(() => import('../pages/private/Home'));
const ProfileSelector = lazy(() => import('../pages/private/ProfileSelector'));

const AppRoutes = () => {
  // 登录态判断逻辑和上面一致，自己替换
  const isLogin = !!localStorage.getItem('id');

  useEffect(() => {
    if (!isLogin) return;
    const unblock = history.block((transition) => {
      if (history.location.pathname === '/' && transition.action === 'POP') {
        unblock();
        window.location.reload();
        return false;
      }
      return true;
    });
    return () => unblock();
  }, [isLogin]);

  return (
    <Router history={history}>
      <Suspense fallback={<LoadingPage />}>
        <Switch>
          <Route exact path={'/'} component={Home} />
          <Route exact path={'/baixar-exames'} component={DownloadExams} />
          <Route exact path={'/profile'} component={ProfileSelector} />
        </Switch>
      </Suspense>
    </Router>
  );
};

export default AppRoutes;

• 调用history.block注册的监听，一定要在副作用清理函数中调用返回的unblock方法取消阻塞，否则会影响其他页面的正常跳转
• 如果登录态存在redux等状态管理中，记得把登录态变量加到useEffect的依赖数组里，确保登录态变化时监听逻辑会同步更新
• 如果不需要重载整个页面，只需要刷新首页的接口数据，可以把window.location.reload()替换为首页拉取数据的方法调用，用户体验更好
• 这个逻辑也可以扩展到禁止登录后回退到登录页的场景，只需要在拦截判断中加一层跳转目标路径是否为登录页的判断即可

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