Javascript 条件路由总是在页面刷新时重定向

我让Reaction路由判断用户，如果user.email存在，它会加载页面，否则它会重定向到"/login"页面.在使用导航时，这一切都运行得很好，但当我刷新浏览器时，它总是重定向到"/".如何对其进行配置，使其在刷新浏览器时保持在当前路由上？

function App() {
  const [user, setUser] = useState({});
  
  useEffect(() => {
    const theUser = localStorage.getItem("user");

    if (theUser && !theUser.includes("undefined")) {
      setUser(JSON.parse(theUser));
    }
  }, []);

  return (
    <div>
      <Navigation />
      <Routes>
        <Route
          path="/login"
          element={user?.email ? <Navigate to="/" /> : <Login />}
        />
        <Route
          path="/"
          element={user?.email ? <Home user={user} /> : <Navigate to="/login" />}
        />
        <Route 
          path="/feedback" 
          element={user?.email ? <Feedback user={user} /> : <Navigate to="/login" />} 
        />
        <Route 
          path="/candidates" 
          element={user?.email ? <Candidates user={user} /> : <Navigate to="/login" />} 
        />
        <Route 
          path="/view-feedback" 
          element={user?.email ? <ViewFeedback user={user} /> : <Navigate to="/login" />} 
        />
      </Routes>
    </div>
  )
}