Как использовать AWS Amplify реагировать компоненты в любом месте приложения - PullRequest
Новая
       5

Как использовать AWS Amplify реагировать компоненты в любом месте приложения

0 голосов
/ 07 февраля 2019

Я использую aws-усиление и aws-усиление-реагирование в моем приложении реакции, и я сталкиваюсь с проблемой аутентификации пользовательского интерфейса, которая кажется простой, но я не могу понять это.Вот мой App.js: 

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

Как видите, я скрыл компоненты аутентификации React, которые поставляются с Authenticator.Однако я хочу использовать их в дочернем компоненте (Учетные записи), вложенном в один из моих Маршрутов.

Вот мои Маршруты: 

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);

Компонент Моя учетная запись пуст.Я попытался импортировать отдельные компоненты, такие как SignIn, SiginUp и Greetings, из aws-amplify-react и использовать их в качестве элементов jsx (например, <SignIn />), но это ничего не отображает.Нужно ли создавать экземпляры этих компонентов непосредственно в компоненте <Authenticator> в моем App.js?Должен ли я передавать компоненты в качестве реквизита для моего Accounts компонента?Если так, есть ли безболезненный способ сделать это?

Может быть, я что-то упускаю, любая помощь будет оценена.

1 Ответ

0 голосов
/ 08 февраля 2019

Если вы хотите только Аутентификацию на странице учетных записей, вам не нужно использовать Authenticator в компоненте приложения.Удалите его и вместо import { withAuthenticator } from 'aws-amplify-react'; прямо внутри страницы учетных записей и оберните экспорт страницы учетной записи как export default withAuthenticator(Account);

. Это даст вам все необходимые компоненты пользовательского интерфейса только внутри страницы учетных записей.Измените экспорт учетной записи на export default withAuthenticator(Account, {includeGreetings: true});, чтобы также получить кнопку выхода из системы.Другие параметры конфигурации здесь

Если вы хотите создать свой собственный пользовательский интерфейс и интегрировать его, а затем импортировать вместо него аутентификацию import { Auth } from 'aws-amplify';, вы не получаете компоненты пользовательского интерфейса, но можете настроить поведение, как бы выхочу.Подробнее о том, как использовать Auth в документации здесь

...