如何在应用程序的任何位置使用 AWS Amplify react 组件

Question

我在我的 React 应用程序中使用了 aws-amplify 和 aws-amplify-react，我面临着一个看似简单但我无法弄清楚的身份验证 UI 挑战。 这是我的 App.js：

class App extends Component {
  render() {
    return (
      <Authenticator hideDefault={true}>
        <Router>
          <MyProvider>
            <Routes />
            <NavbarBot />
          </MyProvider>
        </Router>
      </Authenticator>
    );
  }
}

如您所见，我隐藏了 Authenticator 附带的 React 身份验证组件。 但是，我想在我的其中一个路由中嵌套的子组件（帐户）中使用它们。

这是我的路线：

const paths = () =>{
    return(
        <Switch>
            <Route path="/" exact component={Splash} />
            <Route path="/home" component={Home} />
            <Route path="/listing" component={Listing} />
            <Route path="/account" component={Account} />
            <Route component={NotFound} />
        </Switch>
        )
    };

const Routes =  withRouter(paths);

我的帐户组件是空白的。 我尝试从aws-amplify-react导入单个组件，如 SignIn、SiginUp 和 Greetings，并将它们用作 jsx 元素（例如<SignIn /> ），但这不会呈现任何内容。 我是否必须直接在App.js的<Authenticator>组件中实例化这些组件？ 我是否必须将组件作为道具传递给我的Accounts组件？ 如果是这样，是否有一种无痛的方法？

也许我错过了一些东西，任何帮助将不胜感激。

Answer 1

如果您只想在帐户页面上进行身份验证，那么您不必在 App 组件中使用Authenticator 。 删除它，而是import { withAuthenticator } from 'aws-amplify-react'; 直接在帐户页面内并将帐户页面导出包装为export default withAuthenticator(Account);

这将为您提供仅在帐户页面内所需的所有 UI 组件。 将帐号导出改为export default withAuthenticator(Account, {includeGreetings: true}); 也可以获得注销按钮。 其他配置选项在这里

如果你想构建你自己的 UI 并集成它，那么 import auth 而不是import { Auth } from 'aws-amplify'; ，您不会获得 UI 组件，但您可以根据需要自定义行为。 有关如何在此处的文档中使用 Auth 的更多信息