Auth0 Lock组件未显示在React with container选项中

Question

（使用React）我有/login路线和/signup路线来显示Login和SignUp组件。在我的Login组件中，我使用Auth0's Lock component来显示登录表单，并且我还使用container configuration option将表单显示在我自己的{{1}中而不是默认模式。

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

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

Answer 1

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

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

在我的Login组件中，我覆盖componentWillUnmount方法，获取对Auth0Lock的引用，并致电hide()：

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

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