React应用刷新跳转首页及回退按钮异常问题求助

你的问题根源在于两个关键点：

1. 登录状态校验是异步操作，页面刷新时初始loggedin值为默认状态（比如false），此时通配符路由会先触发跳转，等登录状态更新后已经来不及匹配正确路由。
2. 路由的条件渲染逻辑+未处理历史记录，导致登录/登出后回退按钮行为异常。

1. 给登录校验添加加载状态 #

首先需要在你的LoginSlice中添加加载状态，避免初始状态错误匹配路由：

// LoginSlice 示例代码
const initialState = {
  loggedin: false,
  isLoading: true, // 初始设为加载中
};

export const LoginSlice = createSlice({
  name: 'login',
  initialState,
  reducers: {
    setLoggedin: (state, action) => {
      state.loggedin = action.payload;
      state.isLoading = false;
    },
    setLoading: (state, action) => {
      state.isLoading = action.payload;
    },
  },
});

// 异步校验登录状态的action
export const check_login_status = () => async (dispatch) => {
  dispatch(setLoading(true));
  try {
    // 这里替换成你实际的登录校验逻辑（比如读localStorage、调用接口）
    const isLoggedIn = await yourAuthCheckLogic();
    dispatch(setLoggedin(isLoggedIn));
  } catch (err) {
    dispatch(setLoggedin(false));
  }
};

2. 修改App组件，等待登录状态确定后再渲染路由 #

const dispatch = useDispatch();
const { loggedin, isLoading } = useSelector((state) => state.LoginSlice);

useEffect(() => {
  dispatch(check_login_status());
}, [dispatch]);

// 加载中时显示占位组件，避免初始状态错误跳转
if (isLoading) {
  return <div>加载中...</div>;
}

return (
  <>
    <Router>
      {loggedin ? (
        <div>
          <LayoutAuth />
          <br />
        </div>
      ) : (
        <div>{/* <LayoutNoauth /> */}</div>
      )}
      <div className="page_container">
        <AppRoute loggedin={loggedin} />
      </div>
    </Router>
  </>
);

3. 重构AppRoute的路由逻辑，用路由保护替代条件渲染 #

不再根据登录状态渲染不同路由列表，而是给每个路由添加权限校验，同时用replace属性避免冗余历史记录：

function AppRoute({ loggedin }) {
  return (
    <Routes>
      {/* 登录页：已登录用户访问直接跳首页，用replace清除历史记录 */}
      <Route 
        path="/login" 
        element={loggedin ? <Navigate to="/home" replace /> : <LoginPage />} 
      />
      {/* 首页路由 */}
      <Route 
        path="/" 
        element={loggedin ? <HomePage /> : <Navigate to="/login" replace />} 
      />
      {/* 受保护路由：未登录用户访问直接跳登录页 */}
      <Route 
        path="/home" 
        element={loggedin ? <HomePage /> : <Navigate to="/login" replace />} 
      />
      <Route 
        path="/versions" 
        element={loggedin ? <VersionPage /> : <Navigate to="/login" replace />} 
      />
      <Route 
        path="/pgeactivity" 
        element={loggedin ? <PgeActivityPage /> : <Navigate to="/login" replace />} 
      />
      {/* 通配符路由：根据登录状态跳转，同样用replace */}
      <Route 
        path="*" 
        element={<Navigate to={loggedin ? "/home" : "/login"} replace />} 
      />
    </Routes>
  );
}

• 加载状态确保只有登录状态确定后才渲染路由，避免刷新时初始loggedin为false导致的错误跳转。
• 每个路由单独做权限校验，刷新时能直接匹配到对应路由，不会触发通配符路由。
• replace属性会替换当前历史记录，不会把登录页/错误页加入历史栈，解决了登录后回退到登录页的问题。

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