Ich kann nicht herausfinden, warum ProtectedRoute nach der Aktualisierung des UsSestate nicht wieder rendern wird ⇐ JavaScript

[Anonymous]

Ich möchte, dass der ProtectedRoute auf jedem Render einer Seite, die er schützt, angemeldet ist oder nicht, um einen Server anzurufen und eine Antwort anzeigt, ob der Benutzer angemeldet ist oder nicht. Dem Server wird ein Sitzungs-Cookie gesendet, mit dem er die Entscheidung trifft. Es wird nur einmal beim ersten Render ausgeführt, aber nie wieder aktualisiert, nachdem ich die Antwort vom Server erhalten habe.

Code: Select all

import { lazy, useEffect, useState } from 'react';
import { Navigate } from 'react-router';
import api from '@/api';

const Layout = lazy(() => import('./Layout'));

const ProtectedRoutes = () => {
const [isAuth, setIsAuth] = useState(false);

useEffect(() => {
const fetchData = async () => {
console.log('ProtectedRoutes useEffect fired');
try {
const rsp = await api.request({
url: '/is-authorized',
method: 'GET',
});

if (!rsp) {
throw new Error('No response from server');
}

console.log(
'ProtectedRoutes response:',
rsp.data?.isAuthenticated
);

setIsAuth(rsp.data?.isAuthenticated ?? false);
} catch (error) {
console.error('Error fetching authorization status:', error);
setIsAuth(false);
}
};

fetchData();
}, []);

console.log('isAuth:', isAuth);

if (isAuth === true) {
return ;
}

return (

);
};

export default ProtectedRoutes;
< /code>
Die Browser-Router-Konfiguration < /p>
import { lazy } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router';
import Error from './components/Error';

const ProtectedRoutes = lazy(() => import('./components/ProtectedRoute'));
const AuthenticatePage = lazy(() => import('./components/Authenticate'));
const LoginPage = lazy(() => import('./pages/Login.page'));
const HomePage = lazy(() => import('./pages/Home.page'));
const PeoplePage = lazy(() => import('./pages/People.page'));
const PersonPage = lazy(() => import('./pages/Person.page'));
const NotFoundPage = lazy(() => import('./pages/NotFound.page'));

const router = createBrowserRouter([
{
path: '/',
element: ,
errorElement: ,
children: [
{
path: '/',
element: ,
},
{
path: '/people',
element: ,
},
{
path: '/people/:id',
element: ,
},
],
},
{
path: '/login',
element: ,
errorElement: ,
},
{
path: '/authorization-code/callback',
element: ,
},
{
path: '*',
element: ,
},
]);

export function Router() {
return ;
}