AuthContext que contiene al usuario conectado actualmente:

 // auth-context.ts export interface IAuthContext { auth: IMe | null; setAuth: (user: IMe | null) => void; } const AuthContext = React.createContext<IAuthContext>({ auth: null, setAuth: (auth: IMe | null) => {} }); export default AuthContext;

El componente de la App renderizado principal simplificado donde uso el proveedor de contexto se ve así:

 const App: FC = () => { const [auth, setAuth] = useState<IMe | null>(null); // problematic line return ( <AuthContext.Provider value={{auth, setAuth}}> <BrowserRouter> <Routes> <Route path='/' element={<Main/>}/> <Route path="/login" element={<Login/>}/> <Route path="/register" element={<Register/>}/> <Route path="/about" element={<About/>}/> </Routes> </BrowserRouter> </AuthContext.Provider> ); }

En general, la aplicación funciona bien.

Sin embargo, cuando navego por la aplicación mediante cambios manuales de URL en el navegador web , luego presiono Enter (por lo tanto: actualización de la página), entonces hay un problema con el restablecimiento del contexto de autenticación a nulo...

Creo que cuando cambio la URL manualmente, todo el componente de la App se vuelve a representar y, por lo tanto, el estado de AuthContext se restablece a nulo por la línea problemática .

La idea es que el componente de inicio de Login use setAuth dentro de él después de que la promesa relacionada con el formulario se resuelva positivamente.

¿Algún consejo sobre cómo puedo protegerme de ese problema de renderizado y, por lo tanto, restablecer el contexto al valor nulo predeterminado? Creo que este escenario es un poco básico, pero soy un principiante en el frontend. ¡Gracias!