当用户单击注销按钮时，将用户从仪表板页面重定向到登录页面

Question

嗨，我有一个用户仪表板，其中显示了用户的一些基本详细信息，并且我还提供了一个注销按钮，因此一旦用户单击它，他/她应该完全重定向到登录页面，但问题是何时我正在尝试访问登录页面，然后默认情况下仪表板也会被加载。

我不确定必须在哪里将登录模块添加到 App.js

function App() {
return (
<Router>
<div className="App">
  <Topbar/>
  <div className='container'>
  <Sidebar/>
  <div className='others'>
  
  <Routes>
      <Route path="/" element={<Home/>} />
      <Route path="/createTrip" element={<CreateTrip/>} />
      <Route path="/allTrip" element={<AllTrip/>} />
      <Route path="/driverDetail" element={<DriverDetails/>} />
      <Route path="/myVehicle" element={<MyVehicle/>} />
  <Route path="*" element={<Home />} />
  </Routes>
  </div>
  </div>
  
  </div>
</Router>

); }

Answer 1

根据我对您问题的理解，您希望在单击注销后重定向到登录页面，而是呈现您的仪表板。

您的问题的近似值是重定向、私有路由和 session 处理。

如果您正在处理用户会话（在 localStorage 或您的应用程序状态中持有用户登录 state），请使用私有路由来检查用户是否登录并相应地重定向到所需页面。

在您的示例中，这类似于添加以私有路由为父级的嵌套路由。

私人路线 -

import Navigate from "react-router-dom";
    export const PrivateRoute =({children}) => {
       if(localStorage.getItem("token")){
    return children
           } else {
                Navigate("/login")
           }
    
     }




        function App() {
    return (
    <Router>
    <div className="App">
      <Topbar/>
      <div className='container'>
      <Sidebar/>
      <div className='others'>
      
      <Routes>
          <Route path="/" element={<Home/>} />
          <Route path="/createTrip" element={<PrivateRoute><CreateTrip/></PrivateRoute>} />
          <Route path="/allTrip" element={<PrivateRoute><AllTrip/></PrivateRoute>} />
          // and so on
      </Routes>
      </div>
      </div>

      
      </div>

</Router>