私のアプリのユーザーがKeycloakで認証した後に発生するリダイレクトに関する問題が発生しています。Keycloak redirect_fragmentがreact-router hashRouterと競合します
私のアプリはreact-router hashRouterを使用しています。
URLがそこから成長し続けて：最初のリダイレクトが発生した場合、私はこのようになりますredirect_fragmentを取得します。 keycloakからのリダイレクションでlocation.hash経由のクライアント側ルーティングに問題が発生する可能性があることを示すいくつかの記事を既に読んだことがあります。
私はそれを理解したと思います！
スラッシュを含むデフォルトの代わりに 'noslash' hashRouterを使用すると、リダイレクトループが停止しているようです。これに代えてlocalhost:3000/lol.html#client/side/route
：
私のURLは次のようになりlocalhost:3000/lol.html#/client/side/route
リダイレクトが今1つのリダイレクトした後、適切に終了しているようだが、今私はのハッシュ部分別の問題に実行していますよ私のルートが反応し、ルータを...
EDITで表彰されていない：私は
うち第二の問題は、反応し、ルータを考え出し周りのラッパーを作成します210は、それが現在どのクライアント側の「ページ」であるかを知らせるために使用されます。 このラッパーがwindow.locationと同期していないことがわかりました。
このコンソールの出力を確認してください。これは解決リダイレクト直後に撮影された（とページが空白だった）：
履歴パス名は/state=aon03i-238hnsln-soih930-8hsdlkh9-982hnkui-89hkgyq-8ihbei78-893hiugsu
履歴ハッシュは、（空の）
window.locationのパス名が/lol.html
ウィンドウであるです。ロケーションハッシュは#users/1
state=blah-blah-blahのhistory.pathnameは、authの後にkeycloakが返すリダイレクトURLの一部です。 window.locationが正しいパス/ハッシュに更新されていますが、その履歴は1つのURLのようです。 keycloakは、window.locationを直接変更してこのリダイレクトを実行するのでしょうか？
hash.shush（window.location.hash）を使用してハッシュフラグメントをプッシュして反応ルータを更新しようとしましたが、「このエントリは既にスタックに存在しています」というエラーが表示されました。ロケーションスタックの上にはっきりとしていないので、これは、反応ルータがwindow.locationを内部ロケーションと比較して、最終的にどこにあるのか把握することができました。それで私はどうやってこれを回避しましたか？
代わりにhistory.replace()を使用しました。これは、新しいエントリをスタックにプッシュするのではなく、スタックの一番上のエントリを新しい値で置き換えます。ブラウザで「戻る」ユーザーが/state=blah-blah-blah url < - backに戻ることを拒否しないようにするため、これも意味があります。replaceは、このエントリを履歴スタックから削除します。
最後の部分：反応ルータ履歴.locationは、window.locationのように、パス名とハッシュ成分の両方を持っています。 HashRouterは、history.location.pathnameコンポーネントを使用して、ブラウザのハッシュ後にクライアント側のルートを追跡します。これに相当するwindow.locationはwindow.location.hashに格納されているので、これをwindow.location.pathnameではなくhistory.replace（）に渡す値として使用します。これは私をちょっと混乱させましたが、あなたがそれについて考えるときは意味があります。
反応ルータの履歴には、通常のURLのように扱われているので、先頭にの前に付加された#の代わりに、現在のルートを追跡します。私はhistory.replace()と呼ばれる前に、私は/を持つ有力なハッシュを交換し、その後history.replace()
const slashPath = window.location.hash.replace('#', '/'); history.replace(slashPath);
やれやれ、その値を渡し、私のwindow.location.hashを取るために必要な！