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 acplish what I require, it does not work, and gives me this error "Uncaught Error: [Navigate] is not a <Route> ponent"

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/>}/>

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 acplish what I require, it does not work, and gives me this error "Uncaught Error: [Navigate] is not a <Route> ponent"

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/>}/>

• javascript
• reactjs
• react-router-dom

Share Improve this question Follow edited Jul 10, 2022 at 11:05 motionless570 asked Jul 10, 2022 at 10:47 motionless570motionless570 94922 gold badges1616 silver badges3434 bronze badges 8

• Does this answer your question? Navigate is not a <Route> ponent. All ponent children of <Routes> must be a <Route> or <React.Fragment> – twjs Commented Jul 10, 2022 at 10:53
• Duplicate of stackoverflow./questions/70171991/… – twjs Commented Jul 10, 2022 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 Commented Jul 10, 2022 at 11:04
• <Route path="/login" element={localStorage.getItem("auth_token") ? <Navigate to="/" /> : Login}/> Login doesn't need to be wrapped in tags – twjs Commented Jul 10, 2022 at 11:11
• @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 <Component /> from render. Or maybe you meant to call this function rather than return it. – motionless570 Commented Jul 10, 2022 at 11:14

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 1

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!

Maybe, you can go inside your Main ponent 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" />
    }

Go to Login.js, then

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


 const Login = () => { 

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

}