javascript - Error de profundidad máxima al navegar con 2 rutas react router v6 y problemas de página/envoltorio de autenticación

Estoy usando react dom route v6.

Entonces, hice una estructura como esta:

    <Route element={<AuthenticationRoute/>}>
        <Route path="/login/" element={<LoginPage />} />
        <Route path="/login/:theme" element={<LoginPage />} />
    <Route>

LoginPage tiene un formulario, pero antes, la aplicación necesita verificar si el usuario tiene algunos almacenamientos, si ya fue redirigido y luego debería mostrar la LoginPage.

Necesitábamos hacer muchos redireccionamientos y todas las condiciones estaban almacenadas en la página de login, lo que estaba causando algunos problemas al intentar cargar la página. Así que necesitaba cambiar y mover las condiciones/funciones.

Ahora, el componente AuthenticationRoute es un envoltorio para redirigir si se cumplen algunas condiciones como: doesParameterHasState? getStorageContainUserId?

Y en algún momento, necesito redirigir a otro sitio web y vuelve a la misma ruta (login/...) con un hash como este: #state=redirect_uri=value&param=value.

Este hash contiene toda la cadena de consulta y los necesito para renderizar la LoginPage.

Hay una función aquí para cambiar #state=redirect_uri=value&param=value a ?redirect_uri=value&param=value Pero necesito redirigir a login/{theme}/ con search: redirect_uri=value&param=value

Intenté hacerlo

export const AuthenticationRoute: FunctionComponent = () => {

const state = changeStateHashToQueryString() // it returns the searchParam (string) or false
const auth = getAuthParam()

    if(auth){
      return redirectToAnotherPage()
    } 

    if (state){
        return (
        <Navigate
          to={{
            pathname: `/login/${getTheme()}`,
            search: state
          }}
        />) 
    }
    
    return loading ? <Loading /> : <Outlet> 
}

// it's working, #state=query_string=489829384 to ?query_string=489829384
export const changeStateHashToQueryString = () => { return window.location.hash ? `?${window.location.hash.substring(7)}` : false }

// its working
export const getAuthParam = () => {
 const params = (new URL(window.location)).searchParams;
 return params.get('auth')
}

export const redirectToAnotherPage = () => {
 // it calls another function that builds the url and redirect to another webpage (another app), it works normally
}

Pero me da un error de profundidad máxima. Sé que debería devolver LoginPage, pero necesito que la cadena de consulta funcione. Si hago pathName "/" se renderiza correctamente, pero necesito que la ruta /:theme/ aplique el tema. 1 - ¿Debería usar window.location.assign o algo así? 2 - Si necesito redirigir con frecuencia como (userHasStorage, userDidAcceptTheTerms, etc.), ¿lo estoy haciendo correctamente? ¿Debería crear otra página o ruta?

Resumen:

1. Quiero entrar en la página: https://url.com/login/purpleTheme/#state=queryparam=1234&redirect_uri=1234
2. El componente AuthenticationRoute debería redirigir condicionalmente al login (outlet) con un queryparam así: https://url.com/login/purpleTheme/?queryparam=1234&redirect_uri=1234

Respuesta #1

Parece que el problema principal es que el componente AuthenticationRoute está navegando incondicionalmente desde una ruta "/login/*" a una ruta "/login/*", lo que vuelve a ejecutar el bloque if (state) y vuelve a renderizar el componente Navigate.

Querrás recopilar la información que necesitas y condicionalmente emitir un redireccionamiento imperativo hacia la ruta "/login/*" con los parámetros de queryString apropiados añadidos.

export const AuthenticationRoute: FunctionComponent = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();

  // Run effect when the route pathname changes
  useEffect(() => {
    const search = changeStateHashToQueryString();
    if (search) {
      navigate({
        pathname: `/login/${getTheme()}`,
        search
      });
    }
  }, [navigate, pathname]);

  return loading ? <Loading /> : <Outlet />;
}