reactjs - 登录后放大反应自定义登录 UI 还原

Question

我为我的放大反应应用程序创建了一个自定义SignIn页面。AuthPage这渲染和工作正常，除非我登录后显示旧的注册页面，直到我刷新应用程序。

我已经查看了SignIn组件和AuthPiece组件，但我似乎无法找出onStateChange可能发生这种情况的地方？

index.js

function renderApp(app) {
  render(
    <Authenticator hide={[SignIn, Greetings]} amplifyConfig={awsmobile} hideDefault>
      <AuthPage {...app.props} />
      <AppContainer {...app.props}>
        {app}
      </AppContainer>
    </Authenticator>,
    document.getElementById('root')
  );
}

renderApp(<Root store={store} routeConfig={routeConfig} />);

我遵循了本指南：https ://blog.kylegalbraith.com/2018/11/29/how-to-easily-customize-the-aws-amplify-authentication-ui/

Answer 1

深入研究了Authenticator组件并意识到hideDefault不应该设置，我应该App像这样在组件中拆分渲染：

  render() {
    if (this.props.authState !== "signedIn") {
      return (
        <Authenticator hide={[SignIn, Greetings, SignUp]} amplifyConfig={awsmobile}>
          <AuthPage {...this.props} />
          <RegisterPage {...this.props} />
        </Authenticator>
      )
    } else {
      return (
        <div className="common-app main-content">
          {this.props.children}
        </div>
      );
    }
  }