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

Question

[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 />
            </>
        )
    }

То он срабатывает, то есть страницу в "умном" компоненте редиректит, то при этом компонент, который уже не нужен - рендерится. Почему так и как это исправить? Баг или фича?

Comments

[Flakelf]

Так же появляется ошибка, которую я только сейчас заметил

[Flakelf]

Которая говорит, как я понял, о том, что в методе render() не стоит делать эту проверку и редирект, тогда как сделать?

[Flakelf]

А componentDidMount() при редиректе не срабатывает, странно, что я делаю не так

componentDidMount() {
        console.log('rendered');
    }

Answer 1

[Medin K]

if (this.props.isAuth) {
            this.props.history.push('/personal');
            return null; // Выход из метода
        }

еще есть Redirect в react-router-dom

if (this.props.isAuth) {
            return <Redirect to="/personal" />
        }

Comments

[Flakelf]

Собственно, как сделать лучше? Как делают вообще любители смузи? Или React так развязывает руки, что и мой, и Ваш вариант котируются?

[Medin K]

Flakelf, не знаю золотой середины.
Имею мнение, что редиректы лучше оставить в умных компонентах.
Все конечно зависит от задачи, логики работы.
В вашем варианте получается при вызове действия authUser пользователя редиректит в /personel.
Если есть роут в котором авторизованный пользователь может оставаться в любом случае, в вашем случае его редиректнит в personel (обновил страницу вызов authUser > редирект в /personel)

Answer 2

[Flakelf]

Решил следующий образом, в мой экшн authUser

// client\src\redux\regAuth\actions.js

import { history } from '../../index';

export const authUser = userData => dispatch => {
    dispatch({ type: AUTH_REQUEST });
    console.log('Inside checkAuthData action');
    fetch('user/auth', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(userData)
    })
    .then(res => res.json())
    .then(res => {
        if (!res.status) {
            return dispatch({
                type: AUTH_FAILURE,
                payload: res.message
            });
        }
        dispatch({
            type: AUTH_SUCCESS,
            payload: res.token
        });
        console.log(history);
        history.push('/personal');
        // localStorage.setItem('token', res.token);
    })
    .catch(err => console.log(err));
}

Импортировал history браузера из корневого файла

// client\src\index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from "react-router-dom";
import createBrowserHistory from 'history/createBrowserHistory';
import { Provider } from 'react-redux';

import App from './App.jsx';
import store from './redux/store';

export const history = createBrowserHistory();

ReactDOM.render(
    <Router history={history}>
        <Provider store={store}>
            <App />
        </Provider>
    </Router>, 
    document.getElementById('root'));

И после dispath вызвал метод push у объекта history, какой же я красавчик, будущее веб-разработки нашей необъятной, но тем не менее реквестирую у завсегдатаев варианты, как сделать лучше/оптимальней/красивей/изящней.