Reactjs - Как загрузить компонент после успешного входа в систему с GitHub (Firebase)? - PullRequest
Новая
       15

Reactjs - Как загрузить компонент после успешного входа в систему с GitHub (Firebase)?

0 голосов
/ 24 октября 2019

Home.jsx 

import React, {Component} from 'react';

import { withRouter} from 'react-router-dom';

let provider = new firebase.auth.GithubAuthProvider();

class Home extends Component {

  constructor(props) {

    super(props);
  }

  githubLogin() {

    firebase.auth().signInWithPopup(provider)
      .then((user) => {
        // How to load another component(/dashboard) here on successful login
        // Looking for history.push() method or any other methods
      })
      .catch((error) => {
           // Some code
      });
  }

  render() {

      return (
          <div>
              <button type="button" className="btn btn-social btn-github" onClick={this.githubLogin}>
                  <span className="fa fa-github"/> Sign in with Github
              </button>
          </div>

      );
  }

}

export default withRouter(Home);

App.js 

import React, {Component} from 'react';

import './App.css';

import { BrowserRouter as Router, Switch, Route, Redirect} from 'react-router-dom';

import Home from './components/Home/Home';

import Dashboard from './components/Dashboard/Dashboard';

class App extends Component {

  render() {

    return (
      <div className="App">
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/dashboard" component={Dashboard} />
          <Redirect to="/"/>
        </Switch>
      </Router>
      </div>
    );
  }

}

export default App;

1 Ответ

0 голосов
/ 24 октября 2019

Похоже, вы уже используете withRouter . Вы должны иметь возможность использовать history из реквизита, чтобы протолкнуть маршрут /dashboard. 

class Home extends Component {

  constructor(props) {

    super(props);
  }

  githubLogin() {

    firebase.auth().signInWithPopup(provider)
      .then((user) => {
        this.props.history.push('/dashboard'); // Redirect to dashboard
      })
      .catch((error) => {
           // Some code
      });
  }

  render() {

      return (
          <div>
              <button type="button" className="btn btn-social btn-github" onClick={this.githubLogin}>
                  <span className="fa fa-github"/> Sign in with Github
              </button>
          </div>

      );
  }

}

export default withRouter(Home);
...