javascript - Auth0 锁定组件未显示在带有容器选项的 React 中

Question

(使用 React)我有一个 /login 路由和一个 /signup 路由来显示 Login 和 SignUp 组件。在我的 Login 组件中，我使用 Auth0's Lock component显示登录表单，我也在使用 container configuration option让表单显示在我自己的 div 中，而不是默认模态。

当我的 Login 组件第一次加载时(或在刷新 /login 路由之后)，Auth0 Lock 组件会正确加载。 我的问题是，当我从 /login 路由导航到 /signup 路由，然后返回到 /login 路由时， Auth0 Lock 组件根本不加载。检查页面时，我可以看到我的 container div 是空的。

我找到了 this issue on Auth0's github其他人使用 Angular 遇到同样的问题，但他们的解决方案是将 auth.config.auth0lib.$container 设置为 null 这似乎不是一个好的解决方案.

Answer 1

在浏览了auth0 Lock source之后我发现 hide 方法解决了我的问题:

hide() {
  closeLock(this.id, true);
}

在我的 Login 组件中，我覆盖了 componentWillUnmount方法，获取对 Auth0Lock 的引用，并调用 hide():

componentWillUnmount() {
  this.lock.hide();
}

现在，当我从位于 /login 的 Login 组件导航到另一条路由，然后返回到 /login 时，Auth0 Lock 组件会重新加载并正确显示。