1

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

应用程序.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);
    }
}
4

1 回答 1

0

由于您的 LoginForm 与withRouter您可以使用this.props.history.pushState('/next-route')

于 2020-01-22T23:06:42.297 回答