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

Question

（使用 React）我有一个 /login 路由和一个 /signup 路由来显示 Login 和 SignUp 组件。在我的 Login 组件中，我使用 Auth0's Lock component to display a login form and I'm also using the 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 组件会重新加载并正确显示。

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

Auth0 Lock Component not showing in React with container option

javascript

reactjs

auth0