How To Redirect To Home Page if User is Logged In in reactjs react-router-dom v6

Question

I want to restrict some routes if my user is logged in, if the user is logged in and tries to go to /login it would redirect him to the home page otherwise it would redirect him to the login page.

I am using Laravel API with reactjs. However when I try to accomplish what I require, it does not work, and gives me this error "Uncaught Error: [Navigate] is not a <Route> component"

I tried using <Redirect/> but it is replaced in react-router-dom v6

Here is what I tried.

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>

EDIT:

Here is what I tried based on some other stackoverflow questions, it is still not redirecting to the login page if the user is not logged in and the auth token is not found.

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

Does this answer your question? [Navigate is not a component. All component children of must be a or ](https://stackoverflow.com/questions/70171991/navigate-is-not-a-route-component-all-component-children-of-routes-must-be) — twjs, Jul 10 '22 at 10:53
Duplicate of https://stackoverflow.com/questions/70171991/navigate-is-not-a-route-component-all-component-children-of-routes-must-be — twjs, Jul 10 '22 at 10:55
@twjs this solved half the problem, now when i am logged in and i log out it just doesn't let redirect to the login page. Please check my edited code — motionless570, Jul 10 '22 at 11:04
@twjs i tried your suggestion, still not working and is giving me this error when trying to access /login `Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.` — motionless570, Jul 10 '22 at 11:14
I see okay, so the previous syntax was correct. What happens exactly when a user logs out ? What page are they redirected to ? Maybe you can redirect them directly to login page using the useNavigate hook -> https://reactrouter.com/docs/en/v6/hooks/use-navigate — twjs, Jul 10 '22 at 11:25
@twjs when a user log out he should go to the home page. how can i do that with use navigate, everytime i try to use it it gives me this error `useNavigate() may be used only in the context of a Router component` — motionless570, Jul 10 '22 at 11:37
Check out the implementation provided in the docs, might help -> https://stackblitz.com/github/remix-run/react-router/tree/main/examples/auth?file=src%2FApp.tsx — twjs, Jul 10 '22 at 12:29

score 0 · Answer 1 · answered Jul 10 '22 at 10:56

0

You should use in this case.

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

I was glad to answer you, I hope it helps you!

answered Jul 10 '22 at 10:56

Crenat

31
3

this gives me an error :`export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'` – motionless570 Jul 10 '22 at 10:59
Give me an import string you wrote – Crenat Jul 10 '22 at 12:14
`import { BrowserRouter as Router, Route, Routes, Redirect } from "react-router-dom";` – motionless570 Jul 10 '22 at 12:41

score 0 · Answer 2 · answered Jul 10 '22 at 11:13

0

Maybe, you can go inside your Main component and write this line of code, Now I don't know how you are extracting the data whether the user is logged in or not, but I had a similar situation and I used local storage to check whether the user is logged in or not

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

answered Jul 10 '22 at 11:13

Mridul Gupta

807
1
6
8

i am using local storage aswell, i tried this and i am still getting errors like this one `Uncaught Error: may be used only in the context of a component.` nothing is working :/ – motionless570 Jul 10 '22 at 11:21
try to wrap your above code using BrowserRouter – Mridul Gupta Jul 10 '22 at 11:35

Anoop Sasi · Answer 3 · 2022-07-10T17:11:47.097

0

Go to Login.js, then

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


 const Login = () => { 

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

}

edited Jul 10 '22 at 17:11

answered Jul 10 '22 at 17:09

Anoop Sasi

1
2

How To Redirect To Home Page if User is Logged In in reactjs react-router-dom v6

3 Answers3