Question

我已经进入登录页面，登录后，我想重定向到App.js，但是我很困惑

我在app.js中尝试过，但无法正常工作，它向我显示了登录页面

Login.js代码

import React, { Component, useReducer } from 'react';
import firebase from '../services/fire';
import { Button } from 'reactstrap';

class Login extends Component {
    constructor() {
        super();
        this.state = {
            isLogin: false,
            name: ""
        }
    }
    onSubmit = () => {
        var provider = new firebase.auth.GoogleAuthProvider();
        firebase.auth().signInWithPopup(provider).then(function (result) {
            // This gives you a Google Access Token. You can use it to access the Google API.
            var token = result.credential.accessToken;
            // The signed-in user info.
            var user = result.user;
            // ...
        })
            .catch(function (error) {
                console.log(error);
            });
    }
    componentDidMount = () => {
        firebase.auth().onAuthStateChanged(function (user) {
            if (user) {
                console.log("User signed in ");
                console.log(user);

            } else {
                console.log(" NO User signed in ")
            }
        });
    }
    render() {
        return (
            <div>
                <h2>Wllcome to Online-Web-Courses</h2>
                <Button onClick={this.onSubmit} color="warning" size="lg">GoogleLogin</Button>
            </div>
        )
    }

}
export default Login;

我在App.js中尝试过this.state吗？但它也不起作用。我一直看到登录页面，登录后我希望显示App.js

App.js代码

import React, { Component } from 'react';
import './App.css';
import Header from "./components/Header";
import Home from "./components/Home";
import {Container, Col, Row } from 'reactstrap';
import { ToastContainer } from 'react-toastify';
import AllCourses from './components/AllCourses';
import AddCourse from './components/AddCourse';
import Menu from './components/Menu';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import firebase from './services/fire'
import Login from './components/Login';
class App extends Component {
  constructor(){
    super();
    this.state={
      user:null
    }
  }
componentDidMount(){
  this.authListner();
}
  authListner(){
  firebase.auth().onAuthStateChanged((user)=>{
if(user){
  this.setSate({user});
}else {
  this.setSate({user:null});
}
  })
}
  render(){
    return (
      <div>
          {this.state.user ? (
      
        <Router>
        <ToastContainer/>
        <Container>
          <Header/>
        <Row>
          <Col md={4}>
          <Menu/>
          </Col>
  
          <Col md={8}>
          <Route path="/" component={Home} exact/>
          <Route path="/add-courses" component={AddCourse} exact/>
          <Route path="/view-courses" component={AllCourses} exact/>
          </Col>
        </Row>
        </Container>
        </Router>
       
  ) : ( <Login/>)
  }
      </div>
      
    );
  }
}
  
  


export default App;

Answer 1

将this.setSate（）更改为this.setState（）

layers

登录后，我想将页面重定向到app.js

1 个答案: