• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

95
Vistas
React-Router-Dom changing states of the page

Hi guys i have a problem. When I enter "dashboard" which is a private route it redirects me to "login" first then to dashboard. True and False are playing together. How can i fix it to not redirect me to login then to dashboard.

video example: https://cdn.aboutluc.xyz/images/rc64kb6af92sswn3r4mv.mp4

code:

import React, {
  useState,
  useEffect
} from "react"

import { toast } from "react-toastify"

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

import {
  Login,
  Register,
  Dashboard,
} from "./Pages"

import {
  Navbar
} from "./Components"

import './App.css'
import "react-toastify/dist/ReactToastify.css"
import 'bootstrap/dist/css/bootstrap.min.css'

toast.configure()

const App = () => {

  const [ isAuthenticated, setIsAuthenticated ] = useState()

  const setAuth = (boolean) => {
    setIsAuthenticated(boolean)
  }

  const isAuth = async () => {
    try {
      const res = await fetch("http://localhost:5000/api/auth/verify", {
        headers: { JwtToken: localStorage.JwtToken }
      });

      const parseRes = await res.json();

      parseRes === true ? setIsAuthenticated(true) : setIsAuthenticated(false);
    } catch (error) {
      console.error(error)
    }
  }

  useEffect(() => {
    isAuth()
  }, [])

  return (
    <>
      <Router>
        <Navbar setAuth={setAuth} isAuthenticated={isAuthenticated} />
        <Routes>

          <Route
            exact
            path="/login"
            element={
              isAuthenticated ? (
                <Navigate replace={true} to="/dashboard" />
              ) : (
                <Login setAuth={setAuth} />
              )
            }
          />

          <Route
            exact
            path="/register"
            element={
              isAuthenticated ? (
                <Navigate replace={true} to="/dashboard" />
              ) : (
                <Register setAuth={setAuth} />
              )
            }
          />

          <Route
            exact
            path="/dashboard"
            element={
              isAuthenticated ? (
                
                <Dashboard setAuth={setAuth} />
              ) : (
                <Navigate replace={true} to="/login" />
              )
            }
          />

        </Routes>
      </Router>
    </>
  )
}

export default App
about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

The possible issue I see is the "gap" on the initial render where the isAuthenticated state is undefined and the useEffect hook callback to set that state hasn't run yet. If you attempt to directly access a protected route then regardless of actual auth status the code will bounce you to the login route.

For this you typically want to use the "third" indeterminant state to "hold" on either redirecting to auth or allowing access through to the protected component until the auth status is confirmed.

Abstract the auth status into auth layout components.

const AuthLayout = ({ isAuthenticated }) => {
  if (isAuthenticated === undefined) return null; // or loading spinner, etc...

  return isAuthenticated
    ? <Outlet />
    : <Navigate to="/login" replace />;
};

const AnonymousLayout = ({ isAuthenticated, to }) => {
  if (isAuthenticated === undefined) return null; // or loading spinner, etc...

  return isAuthenticated
    ? <Navigate to={to} replace />
    : <Outlet />;
};

User the layouts to guard/protect specific routes.

<Routes>
  <Route
    element={(
      <AnonymousLayout isAuthenticated={isAuthenticated} to="/dashboard" />
    )}
  >
    <Route path="/login" element={<Login setAuth={setAuth} />} />
    <Route path="/register" element={<Register setAuth={setAuth} />} />
  </Route>
  <Route element={<AuthLayout isAuthenticated={isAuthenticated} />}>
    <Route path="/dashboard" element={<Dashboard setAuth={setAuth} />} />
  </Route>
</Routes>

Note: You only ever call isAuth when the App component mounts. You may want to call this function or otherwise validate your auth token a little more often than this. Passing isAuth into the route wrappers and invoking also in an useEffect hook probably isn't a terrible idea.

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda