javascript - 登录按钮单击ReactJS后如何更改页面

Question

我正在 ReactJS 上创建一个登录页面，如果登录成功，我想加载另一个页面。我也在使用 Firebase 和反应路由器）

这是我的“ Login.js ”的一部分：

import React, {useState} from 'react'
import Fire from "../firebase config/Firebase"

function Login(){


    const Login_Submit = () => {
        Fire.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
            // ...
            console.log(errorCode + errorMessage)
        });


        Fire.auth().onAuthStateChanged(function(user) {
            if (user) {
              // User is signed in.
              // This is where I want to load a other page
            } else {
              // No user is signed in.
            }
        });
    }


    return(

        <div>
                <div>
                    <form className = "form-username">
                        <input className = "username" type="email" placeholder = "Email" value = {email} onChange = {refresh_mail}/>
                    </form>

                    <form className = "form-password">
                        <input className = "password" type="password" placeholder = "Password" value = {password} onChange = {refresh_password}/>
                    </form>

                    <div className = "buttons">
                        <button className = "button is-primary login" onClick = {Login_Submit}>Login</button>
                    </div>
                </div>
        </div>

    )


}


export default Login

我是 ReactJS 的初学者，非常感谢您的帮助！

标签： javascriptreactjsfirebasefirebase-authentication

Answer 1

那么首先你需要反应路由器dom，然后你将解构重定向它。

像这样。

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

然后，如果用户已登录（当然基于状态），您将编写一个重定向到页面的条件。

像这样的东西。

  render(){
    return (
    <div >
    <Header />
    <Switch>
     <Route exact path='/' component={Homepage} />
     <Route path='/shop' component={ShopPage} />
     <Route exact path='/checkout' component={CheckoutPage} />
     <Route exact path='/signin' 
                 //this part to be precise
                  render={() => 
                    this.props.currentUser ? 
                    (<Redirect to='/' />) : 
                    (<SignInAndSignUpPage />)} 
      />
  </Switch>
    </div>
  );
  }