Ich denke, ich habe es herausgefunden!
Die Umleitungsschleife scheint zu stoppen, wenn ich den 'noslash' hashRouter anstelle der Standard verwenden, die einen Schrägstrich enthält.
Meine URLs wie folgt aussehen: localhost:3000/lol.html#client/side/route
statt dessen: localhost:3000/lol.html#/client/side/route
Die Umleitung nun in geeigneter Weise nach einer Umleitung zu beenden scheint, aber jetzt in ein anderes Problem, das ich bin mit dem der Hash-Teil Meine Route wird durch reagieren-Router nicht geehrt ...
EDIT: ich aus
reagieren-Router die zweite Ausgabe dachte einen Wrapper umschafft 210 dass es verwendet, um zu sagen, auf welcher clientseitigen "Seite" es sich gerade befindet. Ich fand, dass dieser Wrapper nicht mit window.location synchronisiert war.
Überprüfen Sie diesen Konsolenausgang. Dies wurde unmittelbar nach der Umleitung aufgelöst wurde (und die Seite war leer):
Geschichte Pfadname ist /state=aon03i-238hnsln-soih930-8hsdlkh9-982hnkui-89hkgyq-8ihbei78-893hiugsu
Geschichte Hash ist (leer)
window.location Pfadname ist /lol.html
Fenster. Lage Hash #users/1
die state=blah-blah-blah im history.pathname Teil der Umleitungs-URL ist, die nach auth sendet keycloak. Sie werden feststellen, dass window.location auf den korrekten Pfad/Hash aktualisiert wurde, aber dieser Verlauf scheint nur eine URL zu sein. Vielleicht ändert keycloak direkt window.location um diese Umleitung durchzuführen?
Ich versuchte mit einem history.push (window.location.hash), um das Hash-Fragment und Update-Reaktion Router, aber habe den Fehler "dieser Eintrag ist bereits auf dem Stapel vorhanden". Da es eindeutig nicht oben auf dem Standort-Stack ist, führte dies zu der Annahme, dass der react-router window.location mit seinem internen Standort vergleicht, um herauszufinden, wo er letztendlich ist. Also, wie bin ich damit klargekommen?
Ich habe history.replace() stattdessen verwendet, die nur den Eintrag auf der Oberseite des Stapels mit einem neuen Wert ersetzt, anstatt einen neuen Eintrag auf den Stapel zu schieben.Dies ist auch sinnvoll, da wir nicht möchten, dass Benutzer, die "zurück" in ihren Browsern navigieren, zu diesem /state=blah-blah-blah url < zurückkehren - Ersetzt diesen Eintrag aus dem Verlaufsstapel.
Ein letzter Teil: react-router history.location, wie window.location, hat sowohl Pfadnamen als auch Hash-Komponenten. HashRouter verwendet die Komponente history.location.pathname, um die clientseitige Route nach dem Hash im Browser zu verfolgen. Das Äquivalent dazu in window.location wird in window.location.hash gespeichert. Daher verwenden wir dies als den Wert, der an history.replace() anstelle von window.location.pathname übergeben wird. Das verwirrte mich ein wenig, macht aber Sinn, wenn man darüber nachdenkt.
react-router history verfolgt auch seine aktuelle Route mit einem vorangestellten / statt einer vorangestellten #, da es nur behandelt wie jede normale URL. Bevor ich history.replace() genannt, ich meine window.location.hash zu nehmen brauchte, ersetzen Sie das führende Hash mit einem / und dann dieser Wert history.replace()
const slashPath = window.location.hash.replace('#', '/'); history.replace(slashPath);
Whew passieren!