javascript - React中post请求成功后重定向的正确方法是什么？

Question

我是 React 新手，正在建立一个小项目。我正在使用 NodeJS 服务器来响应我的请求，并且我尝试在成功登录后重定向用户。我调度一个操作并使用用户信息更新我的 redux 存储，该操作正常工作。但是，当我尝试重定向他时，我要么没有收到任何错误，也没有任何反应，要么 URL 发生更改，但没有组件呈现。 顺便说一句，在 LoginForm.js 中，我试图在多次失败后通过尝试向我的操作添加带有历史对象的回调来返回重定向。 这是我的代码

App.js

import React, { Component } from 'react';
import LoginPage from './login/LoginPage';
import LandingPage from './landingpage/landing.page';
import ProtectedRoute from './protected/ProtectedRoute';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import PageNotFound from './common/pageNotFound';


class App extends Component {

    render() {
        return (
            <Router >
                <Switch>
                    <Route path="/login" component={() => <LoginPage />} />
                    <ProtectedRoute path="/" component={LandingPage} />
                    <Route component={() => <PageNotFound />} />
                </Switch>
            </Router>
        )
    }
}

export default App;

登录页面.js

import React, { Component } from 'react'
import LoginForm from './LoginForm';
import PropTypes from 'prop-types'
import { connect } from 'react-redux';
import { login } from '../../actions/authActions';
import { withRouter } from "react-router";


class LoginPage extends Component {

    render() {
        const { login, userLoading, history } = this.props;
        return (
            <div>
                <h1>Login in here</h1>
                <LoginForm login={login} isLoading={userLoading} history={history} />
            </div>
        )
    }
}

LoginPage.propTypes = {
    login: PropTypes.func.isRequired
}

function mapStateToProps(state) {
    return {
        userLoading: state.auth.isLoading
    }
}

export default connect(mapStateToProps, { login })(withRouter(LoginPage));

登录表单.js

import React, { Component } from 'react'
import TextInput from '../common/TextInput';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
class LoginForm extends Component {

    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: '',
            redirect: false,
        }

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }


    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        })
    }

    handleSubmit(event) {
        event.preventDefault();
        this.setState({ error: null });
        this.props.login(this.state);
        this.setState({
            redirect: true
        })
    }

    render() {
        const { isLoading, isAuth } = this.props;
        const { redirect } = this.state;
        console.log(redirect, isAuth)

        if (redirect && isAuth) {
            return <Redirect to="/" />
        }
        else {
            return (
                <form onSubmit={this.handleSubmit}>
                    <TextInput type="email" name="email" label="Email" onchange={this.handleChange} />
                    <TextInput type="password" name="password" label="Password" onchange={this.handleChange} />
                    {isLoading && <p>We are loggin you in</p>}
                    <button disabled={isLoading} type="submit">Log in</button>
                </form>
            )
        }
    }
}

const mapStateToProps = (state) => {
    return {
        isAuth: state.auth.isAuthenticated
    }
}

LoginForm.propTypes = {
    login: PropTypes.func.isRequired
}

export default connect(mapStateToProps)(LoginForm);

authActions.js

import {
    LOGIN,
    LOGIN_SUCCESS,
    LOGIN_FAILED,
    USER_LOADING,
    USER_LOADED,
    AUTH_ERROR,
    REGISTER_SUCCESS,
    REGISTER_FAIL,
} from '../constants';

export function login(payload) {
    return dispatch => {
        dispatch({ type: USER_LOADING })
        setTimeout(function () {
            return fetch('http://localhost:3000/user/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(payload)
            }).then(
                (res) => {
                    dispatch({ type: LOGIN_SUCCESS })
                    return res.json();
                },
                (err) => dispatch({ type: LOGIN_FAILED })
            ).then((data) => {
                dispatch({
                    type: USER_LOADED,
                    payload: {
                        token: data.token,
                        userid: data.userID
                    }
                })
            });
        }, 1000);
    }
}

Answer 1

由于您的 LoginForm 是用 withRouter 包装的，因此您可以使用 this.props.history.pushState('/next-route')