已登录用户刷新个人页被重定向到主页，React私有路由配置问题排查

你遇到的刷新即重定向的问题，本质是登录态初始化的异步时序与路由渲染时机存在竞态：

• 首次渲染路由时，isLogged 还停留在初始的 false 值，路由会直接判定用户未登录触发重定向
• 等后续通过 dispatch 异步获取到真实登录状态时，重定向已经完成，根本来不及修正状态
• 存在明显的逻辑错位：你把触发登录态校验的 useEffect 写在 Profile 组件内部，路由判定未登录时根本不会渲染 Profile，这个 useEffect 永远不会执行，自然完成不了登录态初始化

1. 给全局登录状态增加「加载中」中间态 #

不要一开始就把 isLogged 的初始值设为 false，在全局用户状态的初始值里增加加载标识：

// 用户状态reducer初始值示例
const initialUserState = {
  isLogged: false,
  isAuthLoading: true, // 初始状态默认正在校验登录态
  userInfo: null
}

等你执行完登录态校验逻辑（从本地存储读取凭证、调用接口验证身份有效性），拿到明确的登录结果后，再把 isAuthLoading 设为 false，同时同步更新 isLogged 的真实值。

2. 调整路由判断逻辑，加载中阶段不做路由跳转 #

修正后的PrivateRoute需要在登录状态加载完成前，直接渲染加载占位内容，不触发任何重定向逻辑：

const PrivateRoute = ({ 
  component: Comp, 
  loggedIn, 
  isAuthLoading, 
  redirect, 
  path, 
  ...rest 
}) => {
  // 登录态未完成校验时，不做任何路由判断，避免提前触发跳转
  if (isAuthLoading) {
    return <div>内容加载中...</div>
  }
  return (
    <Route
      path={path}
      {...rest}
      render={props => {
        return loggedIn ? <Comp {...props} /> : <Redirect to={redirect} />
      }}
    />
  )
}

你之前尝试的第二种路由三元判断写法，同样要先加加载态判断，否则还是会在状态未就绪时直接触发重定向：

<Route path={'/profile/:slug'}>
  {isAuthLoading ? (
    <div>内容加载中...</div>
  ) : isLogged ? (
    <Route path={'/profile/:slug'} component={Profile} />
  ) : (
    <Redirect to={'/'} />
  )}
</Route>

3. 修正登录态校验逻辑的执行位置 #

把你之前写在Profile组件里的登录态初始化useEffect，移到应用最外层的根组件（比如App.js）中，确保整个应用首次加载时，最先执行登录态校验逻辑，不依赖受保护页面的渲染：

// App.js 根组件内的逻辑
useEffect(() => {
  // 应用加载第一时间执行登录态校验，校验完成后更新全局状态
  dispatch({ type: USER_LOGIN })
}, [])

• 只要登录态的获取是异步的（包括从本地存储同步读取的场景，因为状态更新本身是异步派发的），就必须加加载中间态，否则必然出现时序竞态导致的错误重定向
• 全局状态初始化逻辑不能放在受保护路由的页面组件内，否则路由拦截后永远触发不了状态更新

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