Задать вопрос
Flakelf
@Flakelf

Как правильно делать редирект?

Добрый вечер, интересует, как правильно реализовать редирект в связке React/Redux и React Router

У меня есть контейнер для компонента, контейнер обёрнут в WithRouter и Connect:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

import RegAuth from '../components/RegAuth';

import {
    regNewUser,
    authUser
} from '../redux/regAuth/actions';

class RegAuthContainer extends Component {
    render() {

        if (this.props.isAuth) {
            this.props.history.push('/personal');
        }

        return <RegAuth regAuthError={this.props.regAuthError} isAuth={this.props.isAuth} authUser={this.props.authUser} regNewUser={this.props.regNewUser} fetching={this.props.fetching} token={this.props.token} />
    }
}

const mapStateToProps = state => {
    return {
        fetching: state.regAuth.fetching,
        isAuth: state.regAuth.isAuth,
        token: state.regAuth.token,
        regAuthError: state.regAuth.regAuthError
    }
}

const mapDispatchToProps = {
    authUser,
    regNewUser
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RegAuthContainer));


Из хранилища Redux он получает prop isAuth, это false или true, не залогинен или залогинен, соответственно, в render() я проверяю на значение этой prop, вот здесь:

render() {

        if (this.props.isAuth) {
            this.props.history.push('/personal');
        }


Вроде бы всё ок, если isAuth = true, то редиректит на страницу /personal, но смущает следующее:

если в render() обёрнутого в контейнер "тупого" компонента добавить следующий console.log

render() {

        console.log('Rendered');
        

        const { isAuthFormOpened } = this.state;
        const switcherButtonText = isAuthFormOpened ? 'Register now' : 'Already have acc?';

        const { regAuthError, fetching, token } = this.props; // Добавить модный лоадер, если не будет лень

        return (
            <>
                <Header />
                {regAuthError && <Error errorText={regAuthError} />}
                {isAuthFormOpened ? <AuthForm authUserFunc={this.authUser} /> : <RegForm regNewUserFunc={this.regNewUser} />}
                <FormSwitch switcherButtonText={switcherButtonText} FormSwitcher={this.FormSwitcher}/>
                <Footer />
            </>
        )
    }


То он срабатывает, то есть страницу в "умном" компоненте редиректит, то при этом компонент, который уже не нужен - рендерится. Почему так и как это исправить? Баг или фича?
  • Вопрос задан
  • 284 просмотра
Подписаться 1 Простой 3 комментария
Ответ пользователя Medin K К ответам на вопрос (2)
@medin84
software developer
if (this.props.isAuth) {
            this.props.history.push('/personal');
            return null; // Выход из метода
        }

еще есть Redirect в react-router-dom
if (this.props.isAuth) {
            return <Redirect to="/personal" />
        }
Ответ написан