如何在React JS中创建受保护的路由？

Question

我已经在 React JS 中创建了页面导航的路由，现在我想保护其中一些路由，就像我希望其中一些仅在用户登录时才能访问。

const [isLoggedIn, setIsLoggedIn] = useState(false);   useEffect(() => {     const token = localStorage.getItem("token");     setIsLoggedIn(!!token);   }, []); <Route path='/login' element={<Login />} /> <Route path='/signup' element={<SignUp />} /> Route path='/casting/calls/creation' element={isLoggedIn? <CastingCallsCreation /> : <Navigate to='/login' />} />         <Route path='/user/film/booth' element={isLoggedIn? <UserFilmPitchingBooth />: <Navigate to='/login' />} />

这是我尝试过的方法，但会导致问题，例如当我在登录 API 调用中登录成功后尝试导航到 /casting/calls/creation 时，然后导航不起作用，它会给出登录成功的消息，但不会导航到该消息页。

Answer 1

您可以像这样实现该功能

const [isLoggedIn, setIsLoggedIn] = useState(localStorage.getItem('token') !== null);

useEffect(() => {
  setIsLoggedIn(localStorage.getItem('token') !== null);
}, []);

return (
  <BrowserRouter>
    {isLoggedIn?
      <Routes>
        <Route path='/casting/calls/creation' element={<CastingCallsCreation />} />
        <Route path='/user/film/booth' element={<UserFilmPitchingBooth />} />
      </Routes>
      :
      <Routes>
        <Route path='/login' element={<Login />} />
        <Route path='/signup' element={<SignUp />} />
      </Routes>
    }
  </BrowserRouter>
);