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 />），但这并没有呈现任何内容。我是否必须直接在<Authenticator>的{{1}}组件中实例化这些组件？我是否必须将这些组件作为道具传递给我的App.js组件？如果是这样，有没有一种轻松的方法？

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

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组件

1 个答案: