Tengo una base de fuego en AuthStateChange y un conjunto de rutas privadas para renderizar con el enrutador de reacción v6
useEffect(() => { const fetchData = async () => await auth.onAuthStateChanged(async authUser => { console.log('here in authuser') if (authUser) { await dispatch(setUser('SET_USER', authUser)) } else { await dispatch(setUser('SET_USER', null)) } }) fetchData() }, []) <Route path='/' element={<PrivateRoute user={users} />}> <Route path='/courses/:id' element={<CourseDetails />} /> <Route path='/' element={<Courses emailId={users?.user?.email} />} /> <Route path='/enrolled' element={<Enrolled />} /> <Route path='/authored' element={<Authored />} /> <Route path='/users' element={<Users />} /> </Route>En el componente de ruta protegida, verifico si el usuario es nulo y luego redirijo al usuario a la página de inicio de sesión; de lo contrario, represento a los niños.
if (user === null || user.user === null) { console.log('Entered!!!!!') return <Navigate to='/login' replace /> } else { return children ? children : <Outlet /> }En la actualización de la página, si he iniciado sesión, también se me redirige a la ruta de inicio de sesión porque onauthstatechange no ha terminado de ejecutarse. Entonces el usuario es nulo dentro del
¿Cuál es la forma correcta de manejar esta situación y asegurarse de que el usuario navegue a la misma página donde ocurrió la recarga?
Puede crear un componente que maneje el cheque por usted.
Entonces, en su ruta, envuelve su PrivateRoute con su componente de ruta de esta manera:
<Route path='/courses/:id' element={<PrivateRoute><CourseDetails /></PrivateRoute> } /> Entonces, lo que hace este componente es verificar si el usuario está authed . Si está authed , representará el componente secundario que es su ruta. Si no, lo redirigirá a /login
están hablando de eso en los documentos
const PrivateRoute =({ children }: { children: JSX.Element }) => { let auth = useAuth(); let location = useLocation(); if (!auth.user) { // Redirect them to the /login page, but save the current location they were // trying to go to when they were redirected. This allows us to send them // along to that page after they login, which is a nicer user experience // than dropping them off on the home page. return <Navigate to="/login" state={{ from: location }} replace />; } return children; }