How to do a redirect?

Question

Web development

Good evening, I'm interested in how to properly implement a redirect in a React / Redux and React Router bundle
. I have a container for a component, the container is wrapped in WithRouter and 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));

From the Redux store, it receives the isAuth prop, it is false or true, not logged in or logged in, respectively, in render() I check for the value of this prop, here:

render() {

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

Everything seems to be ok, if isAuth = true, then it redirects to the /personal page, but the following confuses:
if the following console.log is added to the render() of a "stupid" component wrapped in a container

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

Either it works, that is, the page in the "smart" component redirects, then the component that is no longer needed is rendered. Why is this and how to fix it? Bug or feature?

Answer 1

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

there is also Redirect in react-router-dom

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