reactjs - 当用户登录 React js 时，防止用户返回登录页面

Question

在登录功能中，我只想在用户登录网站后，用户无法返回登录页面，但不想禁用仪表板上的浏览器后退按钮，我希望用户在点击时重定向到浏览器首页浏览器返回按钮。

Answer 1

根据 react-router version-6您可以按照以下步骤操作:-

这里，isAuth是 bool 值...如果用户已登录，它将变为 true否则 false .

我们正在发送 isAuth , 以 ProtectedRoutes 作为 Prop ，基于该 bool 值，它将显示组件(<Outlet/>)

// In ProtectedRoutes.js
import { Navigate, Outlet } from "react-router-dom";
const ProtectedRoutes = ({auth}) => {
    
    return (auth === true ? <Outlet /> : <Navigate to="/" replace/>)
}
export default ProtectedRoutes;

// In App.js (or) routes.js

       <Routes>
          <Route path='/' element={<LandingPage />} />
          <Route path='/signup' element={isAuth ? <Navigate to="/" /> : <SignUp />} />
          <Route path='/login' element={isAuth ? <Navigate to="/" /> : <Login />} />
          <Route path='/forgetpassword' element={isAuth ? <Navigate to="/" /> : <ForgetPassword />} />
          <Route path='/contactus' element={<ContactUs />} />
          {/* Protected Routes starts from here */}
          <Route element={<ProtectedRoutes auth={isAuth}/>}>
            <Route path='/dashboard' element={<Dashboard />} />
            <Route path='/availablechitplans' element={<AvailableChitPlans/>}/>
            <Route path='/notifications' element={<Notifications/>}/>
            <Route path='/chitplaninfo' element={<ChitPlanInfo/>}/>
            <Route path='/payment' element={<PaymentPage />}/>
          </Route>
        </Routes>