Как сделать Redirect в useEffect?

Question

[Slav4ka]

В глобальном стэйте хранится параметр isAuth, который принимает следующие значения: true - пользователь авторизован, false - пользователь не авторизован. Вопрос такой, как на странице аутентификации сделать редирект при загрузке компонента, если isAuth = true, используя useEffect (ну или другой хук)?

const SignIn = ({hideHeader, showHeader, errorsFromInput, isAuth, isFetching, login}) => {

// если пользователь авторизован, то сюда он никак не дожен попасть!!!!!

    useEffect(() => {
        hideHeader();
// это бред, так нельзя 
        if (isAuth) {
            return <Redirect to={'/'}/>
        }

        return () => {
            showHeader();
        };
    });

    const onSubmit = (formData) => {
        console.log("Submit");
        console.log(formData);
        login(formData.emailOrTelephoneNumber, formData.password)

    };

    return (<div className={`text-center ${styles.signInPage}`}>
            <NavLink to={'/'}>
                <img className="mt-5 mb-3" src="5551.png" alt="" width="300px" height="100px"/>
            </NavLink>

            <ReduxSignInForm onSubmit={onSubmit} disabled={isFetching}/>
            <p className="mt-5 mb-3 text-muted">@VPROFI.RU 2019 All rights reserved </p>

            {
                errorsFromInput &&
                <Alert className={style.alert} variant={'danger'}>
                    {errorsFromInput}
                </Alert>

            }
        </div>
    )
};

const mapStateToProps = state => ({
    errorsFromInput: state.registrationAndLogIn.errors,
    isFetching: state.auth.isFetching,
    isAuth: state.auth.isAuth
});

export default connect(mapStateToProps, {login})(SignIn)

Answer 1

[Mikhail Osher]

const SignIn = ({ isAuth }) => {
  useEffect(() => {
    if (isAuth) {
      history.push('/')
    }
  }, [isAuth])
}

Варианты, как получить объект history.

Для react-router-dom >=5.1

- хук useHistory

Для react-router-dom <5.1

- если SignIn передан, как <Route ... component={SignIn} /> => props.history

- обернуть SignIn в withRouter => props.history

В обоих вариантах для <5.1 существуют подводные камни, если компонент SignIn обёрнут в какие-либо HOCs.

Answer 2

[akyl-kb]

Почему бы сразу редирект не сделать?

const SignIn = (...) => {
 if (isAuth) return <Redirect to={'/'} />
  ... остальной код
}