Question

我有一个登录页面，我想在填写详细信息后将用户重定向到仪表板。我尝试使用history.push和重定向组件，但无法重定向。

登录页面

class Login extends React.Component {

    state = {
        email: '',
        password: '',
        errors: {},
        redirect: false
    }

    validateForm = () => {
        let errors = {};
        let formIsValid = true;

        if(!this.state.email) {
            formIsValid = false;
            errors['email'] = 'Please enter email to continue';
        }

        if(!this.state.password) {
            formIsValid = false;
            errors['password'] = 'Please enter password to continue';
        }

        this.setState({
            errors: errors
        })

        return formIsValid;
    }

    handleChange = (event) => {
        this.setState({
            [event.target.id]: event.target.value
        });
    }

    handleSubmit = (event) => {
        event.preventDefault();
        // console.log(this.state);
        if(this.validateForm()) {
            const loginData = {
                email: this.state.email,
                password: this.state.password
            }
            axios
                .post('/users.json', loginData)
                .then(response => {
                    console.log(response.data);
                })
                .catch(error => {
                    console.log(error);
                })
        }

    }


    render() {
        return (
            <div className="container">
                <form onSubmit={this.handleSubmit} className="white">
                    <h5 className="grey-text text-darken-3">Login</h5>
                    <div className="input-field">
                        <label htmlFor="email">Email</label>
                        <input type="email" id="email" onChange={this.handleChange} />
                        <p>{this.state.errors.email}</p>
                    </div>
                    <div className="input-field">
                        <label htmlFor="password">Password</label>
                        <input type="password" id="password" onChange={this.handleChange} />
                        <p>{this.state.errors.password}</p>
                    </div>
                    <div className="input-field">
                    <button onClick={this.redirectHandler} className="btn btn-primary">Login</button>
                    </div>
                </form>
            </div>
        )
    }
}

导出默认登录名；

使用电子邮件和密码提交表单后，我想重定向到其他页面。我已经尝试了好几天，但找不到解决方案。

Answer 1

import { withRouter } from 'react-router';

class Login extends React.Component {

    state = {
        email: '',
        password: '',
        errors: {},
        redirect: false
    }

    validateForm = () => {
        let errors = {};
        let formIsValid = true;

        if(!this.state.email) {
            formIsValid = false;
            errors['email'] = 'Please enter email to continue';
        }

        if(!this.state.password) {
            formIsValid = false;
            errors['password'] = 'Please enter password to continue';
        }

        this.setState({
            errors: errors
        })

        return formIsValid;
    }

    handleChange = (event) => {
        this.setState({
            [event.target.id]: event.target.value
        });
    }

    handleSubmit = (event) => {
        event.preventDefault();
        // console.log(this.state);
        if(this.validateForm()) {
            const loginData = {
                email: this.state.email,
                password: this.state.password
            }
            axios
                .post('/users.json', loginData)
                .then(response => {
                    this.props.history.push("/dashboard");
                    console.log(response.data);
                })
                .catch(error => {
                    console.log(error);
                })
        }

    }


    render() {
        return (
            <div className="container">
                <form onSubmit={this.handleSubmit} className="white">
                    <h5 className="grey-text text-darken-3">Login</h5>
                    <div className="input-field">
                        <label htmlFor="email">Email</label>
                        <input type="email" id="email" onChange={this.handleChange} />
                        <p>{this.state.errors.email}</p>
                    </div>
                    <div className="input-field">
                        <label htmlFor="password">Password</label>
                        <input type="password" id="password" onChange={this.handleChange} />
                        <p>{this.state.errors.password}</p>
                    </div>
                    <div className="input-field">
                    <button onClick={this.redirectHandler} className="btn btn-primary">Login</button>
                    </div>
                </form>
            </div>
        )
    }
}

export default withRouter(Login);

Answer 2

有人抱怨您的代码。

首先：对于表单验证和处理，您不需要使用状态，有一个名为Formik的图书馆将为您提供很多帮助这个。
秒：如果您正在使用redux来检查用户已登录，或者您不需要为无法创建的路由创建专用路由像此处dashboard组件一样可供公众使用。
第三：要使用历史记录，您需要包装 withRouter HOC内部的组件，它将路线道具传递给您组件，因此您可以使用history，或者如果您正在使用功能组件，则可以使用useHistory()挂钩。

登录后重定向到仪表板

2 个答案: