我的应用程序用户使用Keycloak进行身份验证后，我遇到了重定向问题。
我的应用使用react-router hashRouter。当初始重定向发生时，我得到一个看起来像这样的redirect_fragment：
网址从那里不断增长。我已经阅读了一些帖子，表明从keycloak重定向可能会遇到客户端路由问题通过location.hash ...任何想法都将不胜感激！
答案 0 :(得分：7)
我想我明白了！
如果我使用'noslash'hashRouter而不是包含斜杠的默认值，重定向循环似乎停止了。
我的网址如下所示：localhost:3000/lol.html#client/side/route
而不是：localhost:3000/lol.html#/client/side/route
重定向现在似乎在一次重定向后正确终止，但是现在我遇到了一个不同的问题，即路由的哈希部分没有得到反应路由器的尊重......
编辑：我想出了第二个问题 react-router在window.location周围创建一个包装器，用于告诉它当前所在的客户端“页面”。 我发现这个包装器与window.location不同步。
检查此控制台输出。这是在重定向解决后立即采取的（页面为空白）：
历史路径名为/state=aon03i-238hnsln-soih930-8hsdlkh9-982hnkui-89hkgyq-8ihbei78-893hiugsu
历史哈希是（空）
window.location路径名为/lol.html
window.location哈希为#users/1
history.pathname中的state=blah-blah-blah是keycloak在auth之后发回的重定向网址的一部分。您会注意到window.location已更新为正确的路径/哈希值，但该历史记录似乎是后面的一个URL。也许keycloak直接修改window.location来执行这个重定向？
我尝试使用history.push（window.location.hash）来推送哈希片段并更新路由器，但得到错误“此条目已存在于堆栈中”。由于它显然不在位置堆栈的顶部，这使我相信react-router将window.location与其内部位置进行比较以找出它最终的位置。那我怎么绕过这个呢？
我改为使用history.replace()，它只是用新值替换堆栈顶部的条目，而不是将新条目推送到堆栈。这也是有道理的，因为我们不希望在浏览器中“返回”导航的用户返回到/state=blah-blah-blah url＆lt; - replace从历史堆栈中删除此条目。
最后一部分：react-router history.location，与window.location一样，具有路径名和散列组件。 HashRouter使用history.location.pathname组件在浏览器中的哈希之后跟踪客户端路由。 window.location中的等价物存储在window.location.hash中，因此我们将使用它作为传递给history.replace（）而不是window.location.pathname的值。这让我有点困惑，但是当你想到它时会有意义。
react-router历史记录还使用前置/而不是前置#来跟踪其当前路由，因为它只是将其视为任何普通URL。在我致电history.replace()之前，我需要使用window.location.hash，用/替换前导哈希，然后传递该值history.replace()
const slashPath = window.location.hash.replace('#', '/');
history.replace(slashPath);
呼！