登录后，带有身份验证器的 AWS Amplify 的自定义 UI 不会启动我的应用程序

Question

我为 AWS Amplify 创建了自己的自定义 UI。 我正在遵循有关如何执行此操作的放大指南，即通过使用身份验证器，覆盖“SignIn”和“RequireNewPassword”的showComponent()方法。 这一切都很好。 我可以登录并更改密码。 我的问题是我一生都无法在登录后让我的应用程序默认路由正常工作。

我使用AppWithAuth通用设置：

export default class AppWithAuth extends React.Component<{}, { authState: string }> {
  classes: any;
  constructor(props) {
    super(props);
    this.state = { authState: '' };
    this.handleAuthStateChange = this.handleAuthStateChange.bind(this);
  }

  handleAuthStateChange(state) {
    this.setState({ authState: state });
  }

  render() {
    return (
        <div>
          {this.state.authState === 'signedIn' ? (
            <Authenticator
              theme={authTheme}
              hideDefault={true}
              //hide={[SignIn, RequireNewPassword]}
              amplifyConfig={awsconfig}
              onStateChange={this.handleAuthStateChange}>
              <App />
            </Authenticator>
          ) : (
            <Authenticator
              theme={authTheme}
              hideDefault={true}
              //hide={[SignIn, RequireNewPassword]}
              amplifyConfig={awsconfig}
              onStateChange={this.handleAuthStateChange}>
              <ChangePassword {...this.props} />
              <Login override={SignIn} {...this.props} />
            </Authenticator>
          )}
        </div>
    );
  }
}

Login扩展SignIn并且仅在this._validAuthStates = ['signIn', 'signedOut', 'signedUp'];

ChangePassword扩展了RequireNewPassword并且仅在this._validAuthStates = ['requireNewPassword'];

这两条路径都按预期运行。 这是让我难倒的下一步。

这是我的应用程序类：

import React from 'react';
import { AuthPiece } from 'aws-amplify-react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
...

interface AppProps {
  authState?: any;
}
export default class App extends AuthPiece<AppProps, {}> {

  constructor(props) {
    super(props);
    this._validAuthStates = ['signedIn'];
  }

  showComponent() {
    return (
      <React.Fragment>
        <Router>
          <Switch>
            <Route component={LoggedIn} />

            ...bunch of routes

          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}

我的理解是通过设置this._validAuthStates = ['signedIn']; ，它应该呈现我的应用程序（根据https://aws-amplify.github.io/docs/js/authentication#show-your-app-after-sign-in ）

有谁知道我做错了什么？ 它似乎完全忽略了 App 组件。 我应该扩展 AuthPiece 吗？

干杯

更新更新了AppWithAuth.tsx我似乎已经将它追踪到路由器及其行为方式。 如果我只是渲染一个简单的反应页面，那很好，否则它似乎会重定向，但不会加载我想要的页面。

Answer 1

@here 所以看起来我做得对，问题在于我设置 React 组件和无状态组件的方式以及我如何使用 React Router 与它们交谈。 如果有帮助，以上是放大身份验证器中自定义 UI 的工作代码。