React Router с совместимостью роутера с провайдером AWS AppSync - PullRequest
Новая
       21

React Router с совместимостью роутера с провайдером AWS AppSync

0 голосов
/ 13 января 2019

У меня есть приложение React, которое использует Apollo ( реагировать-apollo) , а также AWS AppSync React . Я пытаюсь обернуть свое приложение React компонентом Provider, как описано в документации, но также обертываю мое приложение в withRouter из пакета react-router, чтобы затем можно было перенаправить приложение при успешном выходе из системы и входе в систему. У меня в настоящее время есть загруженная структура CRA App.js & index.js

// index.js

import React from "react";
import ReactDOM from "react-dom";
import AppContainer from "./App";
import { LoadingScreen } from "./components";

import Amplify from "aws-amplify";

import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from "aws-appsync-react";
import { ApolloProvider } from "react-apollo";

Amplify.configure({
  ...
});

const client = new AWSAppSyncClient({
  ...
});

const WithProvider = () => (
  <ApolloProvider client={client}>
    <Rehydrated render={({ rehydrated }) => (rehydrated ? <AppContainer /> : <LoadingScreen />)}>
      <AppContainer />
    </Rehydrated>
  </ApolloProvider>
);

ReactDOM.render(<WithProvider />, document.getElementById("root"));


// App.js

import React, { Component, Fragment } from "react";
import PropTypes from "prop-types";
import { BrowserRouter, withRouter } from "react-router-dom";
import { hot } from "react-hot-loader";

import { Auth } from "aws-amplify";

import ScrollToTop from "./config/ScrollToTop";
import { Navbar } from "./components";
import Routes from "./config/routes";

class AppContainer extends Component {
  static displayName = "AppContainer";
  static propTypes = {
    history: PropTypes.array
  }

  constructor(props) {
    super(props);

    this.state = {
      isAuthenticated: false
    };
  }

  componentDidMount() {
    ...
  }

  userHasAuthenticated = authenticated => {
    ...
  }

  handleLogout = async () => {
    await Auth.signOut();
    this.userHasAuthenticated(false);
    window.location.replace("/");
  }

  render() {
    const childProps = {
      isAuthenticated: this.state.isAuthenticated,
      userHasAuthenticated: this.userHasAuthenticated,
      handleLogout: this.handleLogout
    };
    return (
      <BrowserRouter>
        <ScrollToTop>
        { !this.state.isAuthenticating &&
          <Fragment>
            <Navbar childProps={childProps} />
            <Routes childProps={childProps} />
          </Fragment>
        }
        </ScrollToTop>
      </BrowserRouter>
    );
  }
}

export default withRouter(hot(module)(AppContainer));

При попытке запустить мое приложение я получаю You should not use <Route> or withRouter() outside a <Router> - я пытался export default hot(module)(withRouter(AppContainer)); безрезультатно.

1 Ответ

0 голосов
/ 14 января 2019

Tom

Используете ли вы Cognito User Pools в качестве метода аутентификации. Если это так, я предлагаю вам использовать aws-ampify, очень просто обернуть приложение реагирования компонентом аутентификатора или HOC Authenticator. Взгляните здесь

...