时间戳

首页 > 解决方案 > 登录反应后重定向到仪表板

reactjs - 登录反应后重定向到仪表板

问题描述

我有一个登录页面，我想在填写详细信息后将用户重定向到仪表板。我曾尝试使用 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>
        )
    }
}

导出默认登录；

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

标签： reactjsreduxaxiosreact-router-dom

解决方案

有一些抱怨你的代码。

  1. 第一：对于表单验证和处理，您不需要使用状态，有一个名为Formik的库，它将在此方面为您提供很多帮助。
  2. 第二：如果您使用 redux 来检查用户是否已登录，您需要为无法访问的路由创建私有路由，例如此处的dashboard组件。
  3. 第三：要使用历史，您需要将组件包装在withRouterHOC 中，这会将路由道具传递给您的组件，以便您可以使用history，或者如果您正在使用功能组件，您可以使用useHistory()钩子。

推荐阅读