Cuando uso React Router 6 para crear una "ruta protegida", veo que el contenido de la página protegida parpadea brevemente antes de redirigir a la página de inicio de sesión.
Supongo que esto debe ser un problema bien conocido. ¿Existe alguna solucion para esto?
Ruta protegida:
const ProtectedRoute = ({ redirectPath = '/login', children }) => { const { user } = UserAuth(); if (!user) { return <Navigate to={redirectPath} replace />; } return children ? children : <Outlet />; }; export default ProtectedRoute;Enrutador de aplicaciones:
const AppRouter = () => ( <Routes> <Route path="/" element={<LoginPage />} /> <Route path="login" element={<LoginPage />}/> <Route element={<ProtectedRoute />} > <Route path="account" element={<AccountPage />} /> </Route> </Routes> ); export default AppRouter;Asumiría que UserAuth() algunas tareas asincrónicas. En bruja es normal obtener este comportamiento. Podrías usar un cargador. Supongo que podría obtener uno de UserAuth() mientras ejecuta el código para la autenticación. Al igual que:
const ProtectedRoute = ({ redirectPath = '/login', children }) => { const { user, loading } = UserAuth(); if (loading) return <div>Loading...</div> if (!user) { return <Navigate to={redirectPath} replace />; } return children ? children : <Outlet />; }; export default ProtectedRoute;El problema es que para proporcionar una UI/UX adecuada al usuario, necesita 3 estados ( es decir, autenticado, no autenticado, indeterminado ) en lugar de 2 ( autenticado y no autenticado ). Con solo 2 estados, el valor de autenticación inicial y la lógica de bifurcación coinciden con uno u otro y "filtran" incorrectamente el contenido protegido por un momento o redireccionan prematuramente a una ruta de inicio de sesión.
Utilice un valor de user indeterminado o un estado de carga para indicar al componente de ruta protegida que aún no debe representar el contenido protegido ni redirigir.
Por ejemplo, si un valor de user autenticado es un objeto de usuario y un valor de user no autenticado es null , utilice undefined como el valor indeterminado y represente condicionalmente nulo o algún indicador de carga mientras se resuelve el estado de autenticación.
const ProtectedRoute = ({ redirectPath = '/login', children }) => { const { user } = userAuth(); if (user === undefined) { return null; // or loading spinner, etc } if (!user) { return <Navigate to={redirectPath} replace />; } return children ? children : <Outlet />; }; A veces es útil simplemente agregar un estado de carga al estado userAuth . La lógica es casi idéntica.
const ProtectedRoute = ({ redirectPath = '/login', children }) => { const { isLoading, user } = userAuth(); if (isLoading) { return null; // or loading spinner, etc } if (!user) { return <Navigate to={redirectPath} replace />; } return children ? children : <Outlet />; };