如果用戶在 reactjs react-router-dom v6 中登錄，如何重定向到主頁

Question

如果我的用戶已登錄，我想限制一些路由，如果用戶已登錄並嘗試轉到/login ，它將將他重定向到主頁，否則會將他重定向到登錄頁面。

我正在使用帶有 reactjs 的 Laravel API。 但是，當我嘗試完成我需要的事情時，它不起作用，並給我這個錯誤"Uncaught Error: [Navigate] is not a <Route> component"

我嘗試使用<Redirect/>但它在react-router-dom v6中被替換

這是我嘗試過的。

import { BrowserRouter as Router, Route, Routes, Navigate} from "react-router-dom";
import Login from "./Login";

       <Router>
            <Routes>
                <Route path="/" element={<Main/>}/>
                <Route path="/login">
                    {localStorage.getItem("auth_token") ? <Navigate to="/"/> : <Route path="/login" element={<Login/>}/>}
                </Route>
                <Route path="/login">
                    {localStorage.getItem("auth_token") ? <Navigate to="/"/> : <Route path="/register" element={<Register/>}/>}
                </Route>
            
                {/* <Route path="/login" element={<Login/>}/>
                <Route path="/register" element={<Register/>}/> */}
            </Routes>
        </Router>

編輯：

這是我根據其他一些 stackoverflow 問題嘗試的方法，如果用戶未登錄且未找到身份驗證令牌，它仍然不會重定向到登錄頁面。

  <Route path="/login" element={localStorage.getItem("auth_token") ? <Navigate to="/" /> : <Login/>}/>

Answer 1

也許，你可以進入你的主組件並編寫這行代碼，現在我不知道你是如何提取用戶是否登錄的數據，但我有類似的情況，我使用本地存儲來檢查用戶是否登錄

    if(!loggedInUser) {
        return <Navigate to="/login" />
    }

Answer 2

轉到 Login.js，然后

***import { useNavigate } from "react-router-dom"***


 const Login = () => { 

   ***const navigate = useNavigate()
   if(localStorage.getItem("auth_token")) {
    navigate('/')
    }***

}

Answer 3

你應該在這種情況下使用。

<Route exact path="/login">
  {localStorage.getItem("auth_token") ? <Redirect to="/" /> : <Route path="/login" element={<Login />}/>}
</Route>

很高興為您解答，希望對您有所幫助！