Reactjs-成功登录GitHub（Firebase）后如何加载组件？

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

import React，{Component}来自'React'；
从“react router dom”导入{withRouter}；
let provider=new firebase.auth.GithubAuthProvider（）；
类Home扩展组件{
建造师（道具）{
超级（道具）；
}
githubLogin（）{
firebase.auth（）.signInWithPopup（提供程序）
。然后（（用户）=>{
//如何在成功登录时在此加载另一个组件（/dashboard）
//查找history.push（）方法或任何其他方法
})
.catch（（错误）=>{
//一些代码
});
}
render（）{
返回(
使用Github登录
);
}
}
使用路由器导出默认值（主）；

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;

import React，{Component}来自'React'；
导入“/App.css”；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Redirect}；
从“./components/Home/Home”导入Home；
从“./components/Dashboard/Dashboard”导入仪表板；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

看起来您已经在使用了，您应该能够使用道具中的

历史记录来推动
/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);

class Home扩展组件{
建造师（道具）{
超级（道具）；
}
githubLogin（）{
firebase.auth（）.signInWithPopup（提供程序）
。然后（（用户）=>{
this.props.history.push（'/dashboard'）；//重定向到dashboard
})
.catch（（错误）=>{
//一些代码
});
}
render（）{
返回(
使用Github登录
);
}
}
使用路由器导出默认值（主）；
您真的想动态加载组件，还是只想将其呈现为子组件？子组件可以工作。这将是一个无效的钩子调用。因为我使用的是类组件哦，是的，如果你能将组件转换成功能组件，你可以使用钩子