带有Authenticator的AWS Amplify自定义用户界面在登录后不会启动我的应用程序

Question

我为AWS Amplify创建了自己的自定义UI。我遵循关于如何做到这一点的详细指南，即使用Authenticator，覆盖"SignIn"one_answers"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-登录后的应用程序(

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

干杯

更新更新AppWithAuth.tsx我似乎已经追踪到了路由器以及它的行为。如果我只是简单地呈现一个简单的react页面，那没关系，否则它似乎会重定向，但不会加载我想要的页面。

Answer 1

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