重定向组件仅在 ReactJS 中出现一瞬间

Question

这是MasterExcelService.js

import axios from 'axios';

const MASTEREXCEL_API_BASE_URL = "http://localhost:8080/api/masterexcel";


class MasterExcelService{

    getMasterExcel(){
        return axios.get(MASTEREXCEL_API_BASE_URL);
    }
}

export default new MasterExcelService();

这是MasterExcelModule.jsx

import React, { Component } from 'react';
import MasterExcelService from '../services/MasterExcelService';
import HeaderComponent from './HeaderComponent';

class MasterExcelModule extends Component {
    constructor(props) {
        super(props)

        this.state = {
                masterexcel: []
        }
    }
    
    componentDidMount(){
        MasterExcelService.getMasterExcel().then((res) => {
            this.setState({ masterexcel: res.data});
            console.log(res.data);
        });
    }

    render() {
        return (
            <div>
                <HeaderComponent/>
                <h2 className='text-center'>Master Excel Module</h2>
                <div className = 'row'>
                    <table className='table table-striped table-bordered'>
                        
                        <thead>
                            <tr>
                                <th>Serial Number</th>
                                <th>Banner</th>
                                <th>Chain</th>  
                                <th>Actions</th>
                            </tr>
                        </thead>

                        <tbody>

                            {
                                this.state.masterexcel.map(
                                    master =>
        
                                    <tr key = {master.excelID}>
                                        <td>{master.excelID}</td>
                                        <td>{master.banner}</td>
                                        <td>{master.pChain}</td>

                                    </tr>
                                )
                            }

                        </tbody>
                    </table>

                </div>

            </div>
        );
    }
}

export default MasterExcelModule;

这是LoginComponent.jsx

class LoginComponent extends Component {
    constructor(props) {
        super(props);
        this.state = this.initialState;
        this.isValid = false
        this.validateUser = this.validateUser.bind(this);
    }

    initialState = {
        userID:'', password:'', error:'', loggedIn: false
    };
    
    credentialChange = event => {
        this.setState({
            [event.target.name] : event.target.value
        });
    };
    
    validateUser = () => {

        let user = { 

            userID: this.state.userID, 
            password: this.state.password,
        };
        
        UserService.loginUser(user).then((res) => {
            
            if(res.data ==='SUCCESS') {
                window.sessionStorage.setItem("isUserLogged", true);
                this.props.history.push({ pathname: "/master-excel" });
            } else if(res.data === 'FAILURE') {
                this.resetLoginForm();
                window.sessionStorage.setItem("isUserLogged", false);
                this.setState({error:"Invalid User ID or Password, please try again!"});
            }
        })
    };
   
    resetLoginForm = () => {
        this.setState(() => this.initialState);
    };

    render() {
        const {userID, password, error} = this.state;

        return (
            <div>
                 <br></br>
                 <br></br>
                <Row className="justify-content-md-center">
                <Col xs={"auto"}>
                {error && <Alert variant="danger">{error}</Alert>}
                <Card>
                    <Card.Header className={"border border-light bg-light text-black"}>
                        <FontAwesomeIcon icon={faSignInAlt}/> Login
                    </Card.Header>
                <br></br>
                <form>
                    <label>
                    &nbsp; &nbsp; User ID: &nbsp; &nbsp;
                    <input type="text" name="userID" value={userID} onChange={this.credentialChange} />
                    </label>
                    <label>
                    &nbsp; &nbsp; Password: &nbsp; &nbsp;
                    <input type="password" name="password" value={password} onChange={this.credentialChange} /> &nbsp; &nbsp;
                    </label>
                    &nbsp; &nbsp; <Button type="Submit" variant = "outline-success" onClick={this.validateUser} disabled={this.state.userID.length === 0 || this.state.password.length === 0}>Login</Button>
                    &nbsp; &nbsp; <Button type= "reset" variant = "outline-primary"onClick={this.resetLoginForm}>Reset</Button> &nbsp; &nbsp;
                </form>
                <br></br>
                </Card>
                </Col>
                </Row>
            </div>
        );
    }
}

export default (LoginComponent);

这是LandingPage.jsx - 主页

class LandingPage extends Component {

    constructor(props){
        super(props)

        this.masterExcel = this.masterExcel.bind(this);
        this.login = this.login.bind(this);
    }

    masterExcel(){
        this.props.history.push('/master-excel');
    }

    login(){
        this.props.history.push('/login');
    }

    render() {
        return (
            <div>
                <h1> THIS IS THE LANDING PAGE </h1>

                <Button size="sm" type="button" variant="success" onClick={this.login}>
                        Login
                </Button>

                {` `}

                <Button size="sm" type="button" variant="success" onClick={this.masterExcel}>
                        Master Excel
                </Button>
            </div>
        );
    }
}

export default LandingPage;

这是App.js

function App() {
  return (

    <div>
        <Router>
            <div className='container'>
              <Switch>
                <Route path = "/" exact component={LandingPage}></Route>
                <Route path = "/login" exact component={LoginComponent}></Route>
                {/* <Route path = "/master-excel" exact component={MasterExcelModule}></Route> */}
                <Route path = "/register" exact component={RegisterComponent}></Route>

                <Route path="/master-excel" exact render={(props) => (
                  window.sessionStorage.getItem("isUserLogged") === "true"
                  ? <MasterExcelModule {...props}/>
                  : <Redirect to='/login' />
                )} />
              </Switch>
            </div>
        </Router>
    </div>
  );
}

export default (App);

所以，我遇到了这段代码的问题。我试图在成功登录后将用户重定向到一个新组件，但在我被重定向回我的登录页面之前，重定向的组件只停留了一瞬间。

当我通过它们的链接打开所有组件时，它们打开得很好，只是重定向/导航造成了这个问题。我哪里错了？

我正在使用 react-router-dom v 5.2.0 和反应版本 17.0.2

Answer 1

我已经解决了这个问题。 LoginComponent 中的按钮类型设置为“提交”，将其更改为“按钮”立即解决问题！[=10=]

重定向组件仅在 ReactJS 中出现一瞬间

Redirected Component is only appearing for a split-second in ReactJS

reactjs

react-router

react-router-dom