React两个Route表现异常：已登录访问/create被重定向至/dashboard

核心原因 #

你遇到的问题本质是组件初始渲染时user状态为null，触发了短暂的未登录重定向逻辑，而Login组件的自动跳转逻辑又把页面导向了dashboard——只是刷新dashboard时，最终跳转回了目标页面，你没察觉；但刷新/create时，最终跳去了dashboard，和你的预期不符，所以问题显得格外明显。

具体流程：

1. 刷新/create页面，App组件初始渲染，此时Context里的user是初始值null
2. 路由判断user为null，触发跳转到/login
3. Login组件挂载后，检测到localStorage里有用户信息，自动跳转到dashboard
4. 与此同时，Context里的useEffect才执行，把user设置为localStorage里的值，但此时页面已经完成了两次跳转，最终停在dashboard

而刷新dashboard时，流程是：刷新→跳login→跳回dashboard，最终回到你要的页面，所以你没注意到中间的跳转。

解决方案 #

方案1：直接初始化user状态（最简便）

把Context里的user初始值直接从localStorage读取，避免初始渲染时的null状态：

// UserContext.js
const [user, setUser] = useState(localStorage.getItem("user") || null);

// 可以去掉原来的useEffect，因为初始值已经完成读取

这样组件第一次渲染时user就有值，不会触发跳转到login的逻辑。

方案2：添加加载状态，避免过早重定向

在Context里增加一个加载状态，确保user值加载完成后再渲染路由：

// UserContext.js
const [user, setUser] = useState(null);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  const storedUser = localStorage.getItem("user");
  setUser(storedUser);
  setIsLoading(false);
}, []);

然后在App组件里先判断加载状态：

// App.jsx
const { user, isLoading } = useContext(UserContext);

if (isLoading) {
  return <div>加载中...</div>; // 替换成你的加载组件或空状态
}

return (
  <>
    <Route path="create" element={user ? <Create /> : <Navigate to="/login" />} />
    <Route path="dashboard" element={user ? <Dashboard /> : <Navigate to="/login" />} />
  </>
);

方案3：调整Login组件的跳转逻辑

如果Login组件里有“检测到localStorage有用户就自动跳转到dashboard”的逻辑，可以修改为：只有当用户确实未登录（比如点击登录按钮后）才跳转，或者等待Context的user状态更新后再判断，避免初始挂载时的自动跳转。

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