Перенаправление на панель управления после входа в систему

Question

У меня есть страница входа в систему, и я хочу перенаправить пользователей на панель инструментов после того, как детали будут заполнены. Я пытался использовать history.pu sh и компоненты перенаправления, но не смог перенаправить.

Страница входа

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

есть некоторые жалобы на ваш код.

1. сначала: для проверки и обработки формы вам не нужно использовать состояние, есть библиотека с именем Formik , которая вам очень поможет в этом.
2. во-вторых: если вы используете redux для проверки того, что пользователь вошел в систему или нет, вам нужно создать личный маршрут для маршрутов, которые не могут быть доступны для publi c как здесь dashboard component.
3. треть: использовать история, вам нужно обернуть ваш компонент внутри withRouter HO C, который будет передавать реквизиты маршрута вашему компоненту, чтобы вы могли использовать history или, если вы используете функциональный компонент, вы можете использовать useHistory() hook.

Answer 2

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);