I am using react-router v6 I am trying to protect some routes and not give access to users if they are not authenticated. I am using the token to determine if user is authenticated or not. After I login into the app using login details instead of returning todos route it doesn’t show anything. I get this error message on the console Maximum depth update exceeded . However, if I’m not protecting the routes it works fine.
This is how I am protecting routes.
const token = useSelector(state => state.authDetails.token );
let routes = (
<Routes>
<Route path='/signUp' exact element={<SignUpForm />}/>
<Route path='/' exact element={<LoginForm />}/>
<Route path='*' replace element={<Navigate to="/" />}/>
</Routes>
)
if(token !== null ) {
routes = (
<Routes>
<Route path='/todos' element={<AddTodo/>}/>
<Route path='/logout' element={<Logout/>}/>
<Route path='*' replace element={<Navigate to="/" />}/>
</Routes>
)
}
return (
<div className="App">
<header>
<Navbar />
</header>
{routes}
</div>
);