我在我的 ReactJS 應用程式中使用 react-router-dom 進行路由。而且我想防止用戶在登錄后回傳，即我不希望用戶在登錄后點擊瀏覽器上的回傳按鈕時再次回傳登錄螢屏。
或者另一個例子是當用戶單擊注銷按鈕時，我不希望用戶在注銷后能夠導航回主應用程式。
我能找到的大多數其他問題都已過時，不再可用于 react-router v6。
也許我想以某種方式從 react-router-dom 的歷史記錄中洗掉該物件？
我認為除了讓我設定 isLoggedIn 的狀態并檢查之外，react-router 還必須提供一種方法，對嗎？
uj5u.com熱心網友回復：
您可以根據條件（例如：用戶是否登錄）創建一組不同的路由，然后為每個條件設定一個默認重定向路由。為了創建這個集合，您必須知道在什么狀態下可以訪問哪些路由，例如，如果用戶嘗試訪問他們應該訪問的此類路由，則未經授權的用戶無法導航到包含任何創建、洗掉或更新操作的路由被重定向到默認路由，如登錄頁面。同樣，授權用戶不應該能夠訪問登錄/注冊路由。您可以像下面這樣構造您的代碼，這是關于身份驗證狀態的，但您也可以自由使用任何其他條件：
在您的主要組件中（通常App.js/App.tsx您定義路線的位置）
let routes;
if(loggedIn){
routes = (
<Routes>
<Route path='/' element={<HomePage/>}/>
<Route path='/groups' element={<Groups/>}/>
<Route path='/some/other/route/:id' element={<AuthCompN/>}/>
<Route path='*' element={<Navigate to ='/'/>}/>
</Routes>
)
}
else{
routes = (
<Routes>
<Route path='/auth' element={<Login/>}/>
<Route path='*' element={<Navigate to="/auth"/>}/>
</Routes>
)
}
return (
<BrowserRouter>
<div className="fixed w-full h-full">
{isLoggedIn&&<Navbar />}
{routes}
</div>
</BrowserRouter>
);
正如我們所看到的，routes根據登錄狀態為變數分配了不同的路由集。最后一個路徑被標記的路徑是*除上面定義的路徑之外的任何其他路徑，因此如果用戶登錄并嘗試訪問或回傳/login路徑，他們將被重定向到呈現主組件或類似內容的路徑。當用戶未登錄并嘗試訪問受保護的路由時，同樣的邏輯適用。
uj5u.com熱心網友回復：
試試這個
componentDidUpdate() {
window.addEventListener('popstate', function(event) {
window.history.pushState(null, document.title, window.location.href);
});
}
您可以在這里找到完整的答案：如何防止用戶回傳 react-router-dom？
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/475027.html