Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Blank page after logout when the app re-renders `<Admin>` during `authProvider.logout()`

Abierto Apto para principiantes
  • ¿Algo no está bien?
#11,431 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
76/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Empieza por InternalRouter en packages/ra-core/src/routing/adapters/reactRouterProvider.tsx, donde se llama a createHashRouter durante el renderizado. Sigue cómo se usa la instancia del router cuando useLogout navega a /login y el componente se vuelve a renderizar. Se considera terminado cuando la página de inicio de sesión se renderiza después de la reproducción descrita, incluso si el componente situado por encima de <Admin> se vuelve a renderizar durante el cierre de sesión.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

What you were expecting:
When checkAuth fails, the user lands on the login page.

What happened instead:
The URL changes to #/login, but the page stays blank.
The router is still on the previous location, rendering LogoutOnMount (which renders null).

It happens whenever the component rendering <Admin> re-renders while authProvider.logout() is running.
Auth SDKs commonly trigger this: clearing the session notifies a context provider above <Admin>.

Steps to reproduce:

  1. Render the app below.
  2. Open /#/posts.
  3. The URL becomes /#/login, but nothing is rendered.

Related code:

import { useState } from "react";
import { Admin, CustomRoutes } from "react-admin";
import { Route } from "react-router-dom";

let rerender = () => {};

const authProvider = {
  login: () => Promise.resolve(),
  checkAuth: () => Promise.reject(new Error("no session")),
  checkError: () => Promise.resolve(),
  getPermissions: () => Promise.resolve(),
  logout: () => {
    rerender(); // stands for an auth SDK notifying the app that the session was cleared
    return Promise.resolve();
  },
};

export const App = () => {
  const [, setTick] = useState(0);
  rerender = () => setTick((t) => t + 1);
  return (
    <Admin authProvider={authProvider} requireAuth loginPage={() => <div>Login page</div>}>
      <CustomRoutes>
        <Route path="/posts" element={<div>Posts</div>} />
      </CustomRoutes>
    </Admin>
  );
};

Other information:

  • Cause: InternalRouter in packages/ra-core/src/routing/adapters/reactRouterProvider.tsx calls createHashRouter(...) in its render body.
    Every re-render creates a new router at the current URL.
    The navigate("/login") scheduled by useLogout goes to the discarded router: it updates the URL, but the current router never sees it.

  • Suggested fix: create the router once, e.g. with useState(() => createHashRouter(...)).

  • Workaround: wrap the app in a router created once, which RouterWrapper then uses:

    const router = createHashRouter([{ path: "*", element: <App /> }]);
root.render(<RouterProvider router={router} />);

Environment

  • React-admin version: 5.15.5
  • React version: 19.3.1
  • React Router version: 7.18.4
Lenguaje dominante
TypeScript
Estrellas
27k
Forks
5.5k
Merge medio
1 d 3 min
PR fusionados (30 d)
32

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de marmelab/react-admin

Todos los issues de marmelab/react-admin

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.