Reactjs-如何在成功登录GitHub(Firebase)后加载组件

Question

主页.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;

Answer 1

看起来你已经在使用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);