如何在应用程序的任何位置使用 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> 组件中实例化这些组件？我是否必须将组件作为 props 传递给我的 Accounts 组件？如果是这样，有没有无痛的方法？

也许我遗漏了什么，我们将不胜感激。

Answer 1

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

这将为您提供仅在帐户页面内需要的所有 UI 组件。将帐户导出更改为 export default withAuthenticator(Account, {includeGreetings: true}); 以获得注销按钮。其他config options here

如果您想构建自己的 UI 并集成它，然后导入 auth 而不是 import { Auth } from 'aws-amplify';，您不会获得 UI 组件，但您可以根据需要自定义行为.更多关于如何使用 Auth in the docs here

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

How to Use AWS Amplify react components anywhere in an application

javascript

reactjs

aws-amplify