登錄后，帶有身份驗證器的 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 的工作代碼。