實現js跳轉路由官方文件：js路由跳轉

1、要引入Redirect

import { BrowserRouter as Router,Route, Link, Redirect, withRouter} from "react-router-dom";

2、定義一個flag

this.state = {

    loginFlag:false

};

3、render裡面判斷flag 來決定是否跳轉

if(this.state.loginFlag){

    return <Redirect to={{ pathname: "/" }} />;

}

4、要執行js跳轉

通過js改變loginFlag的狀態

改變以後從新render 就可以通過Redirect自己來跳轉

demo：

import React, { Component } from 'react';
import {Redirect} from "react-router-dom";

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            loginFlag:false            
        };
    }

    doLogin=(e)=>{

        e.preventDefault();
        
        let username=this.refs.username.value;
        let password=this.refs.password.value;

        console.log(username,password)

        if(username=='admin' && password=='123456'){
            //登入成功   跳轉到首頁
            this.setState({

                loginFlag:true
            })

        }else{

            alert('登入失敗')
        }

    }

    render() {

        if(this.state.loginFlag){

            // return <Redirect to={{ pathname: "/" }} />;

            return <Redirect to='/' />;
        }
        return (    

            <div>
                <form onSubmit={this.doLogin}>

                    <input type="text"  ref="username" />  <br /> <br />

                    <input type="password"  ref="password" /> <br /> <br />

                    <input type="submit"  value="執行登入"/>

                </form>               

            </div>
            
        );
    }
}

export default Login;