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

Question

（使用 React）我有一个/login路由和一个/signup显示Login和SignUp组件的路由。在我的Login组件中，我使用Auth0 的 Lock 组件来显示登录表单，并且我还使用container配置选项 让表单以我自己的方式显示，div而不是作为默认模式显示。

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

我在 Auth0 的 github 上发现了这个问题，其他人使用 Angular遇到了同样的问题，但他们的解决方案是设置auth.config.auth0lib.$container为nullwhich 似乎不是一个好的解决方案。

Answer 1

查看auth0 Lock 源代码后，我找到了hide解决我的问题的方法：

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

在我的Login组件中，我重写该componentWillUnmount方法，获取对 的引用Auth0Lock，然后调用hide()：

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

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