ReactJS私有路由运行异常，登录后访问/create等路由需刷新才生效

问题根因 #

App组件内的user变量仅在组件初始化时从localStorage读取一次，localStorage本身不具备响应式特性，登录完成后你更新了localStorage里的profile字段，不会触发App组件重新渲染，user会一直保留初始的null值，导致路由鉴权判断失效，只有手动刷新页面重新执行初始化逻辑才能拿到最新的用户状态。

最优修复方案（适配你当前的Redux技术栈） #

你的项目已经接入了Redux做状态管理，直接把用户状态存入Redux即可实现响应式更新：

1. 调整Redux的auth模块，登录成功后同时将用户信息写入Redux store和localStorage
2. 修改App组件的user取值逻辑，从Redux订阅状态代替直接读localStorage：

// 顶部引入useSelector
import { useDispatch, useSelector } from "react-redux";

const App = () => {
  const dispatch = useDispatch();
  // 替换原来的user定义，路径匹配你实际的Redux state结构即可
  const user = useSelector(state => state.auth.user);

  // 其余逻辑保持不变
}

修改完成后，登录成功更新Redux的用户状态时，App组件会自动重新渲染，路由判断会实时生效，不需要手动刷新。

可选优化：封装私有路由组件 #

你可以把鉴权逻辑抽成通用的私有路由组件，避免每个受限路由重复写判断逻辑：

// 单独封装PrivateRoute组件
import { Route, Redirect } from "react-router-dom";
import { useSelector } from "react-redux";

const PrivateRoute = ({ children, ...rest }) => {
  const user = useSelector(state => state.auth.user);
  return (
    <Route
      {...rest}
      render={({ location }) =>
        user ? children : <Redirect to={{ pathname: "/feedbacks", state: { from: location } }} />
      }
    />
  );
};

之后App内的受限路由直接调用即可：

<PrivateRoute path="/create">
  <CreateFeedback />
</PrivateRoute>
<PrivateRoute path="/edit/:id">
  <UpdateFeedback />
</PrivateRoute>

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