Реагировать перенаправления после успешного входа в систему, но страница не обновляется до обновления

Question

У меня проблема с маршрутизацией. У меня есть страница входа, где после успешного входа пользователь должен быть перенаправлен на главную страницу. На самом деле он изменяет путь в браузере и перенаправляет, но страница загружается после его обновления. Я что-то упустил с маршрутизацией, но не могу решить это сейчас. Это происходит также, когда я выхожу из приложения. Это моя система маршрутизации

import React from 'react';
import {Switch, Route, Redirect, BrowserRouter} from 'react-router-dom';
import Home from '../components/home';
import _ from 'lodash';
import Header from '../components/header';
import LeftSidebarMenu from '../components/left-sidebar-menu';
import CreateCategory from '../components/categories/create-category';
import MainLayout from '../layouts/main-layout';
import Login from '../components/login';
import {MAIN_PATH, CREATE_CATEGORY, LOGIN_PAGE} from '../configs/constants';
import {StorageManager} from '../helpers/utilities';
import ProtectedRoute from '../helpers/services/auth';

const Routes = () => {
    const isLoggedIn = StorageManager.get('session');

    const appSwitch = () => (
        <Switch>
            <Redirect exact from="/" to="/categories" />
            <ProtectedRoute exact path={CREATE_CATEGORY} component={CreateCategory} isAuth={isLoggedIn} />
            <ProtectedRoute exact path={MAIN_PATH} component={Home} isAuth={isLoggedIn} />
            <ProtectedRoute exact path={CREATE_CATEGORY} component={CreateCategory} isAuth={isLoggedIn} />
        </Switch>
    );
    console.log('inside route');
    return (
        <>
            <div className="background"></div>
            <BrowserRouter>
                {_.cond([
                    [(val) => !_.isEmpty(val), _.constant(
                        <MainLayout>
                            <Header  />
                            <LeftSidebarMenu />
                            <main className="main-container">
                                {appSwitch()}
                            </main>
                         </MainLayout>,
                    )],
                    [_.stubTrue, _.constant(
                        <div className='login-page'>
                            <Switch>
                                <Route exact path={LOGIN_PAGE} component={Login} />;
                            </Switch>
                        </div>,
                    )],
                ])(isLoggedIn)}
            </BrowserRouter>
        </>
    );
};

export default Routes;

И это моя страница входа в систему

import React from 'react';
import {shallowEqual, useSelector, useDispatch} from 'react-redux';
import FormGroup from '../../components/core/form/form-group';
import Button from '../../components/core/button';
import useForm from '../../helpers/custom-hooks';
import {signInRequest, clearActionResultAdmin} from '../../redux/actions';
import {showAlert} from '../../helpers/services/alert';

const Login = (props) => {
    const dispatch = useDispatch();
    const actionResult = useSelector((state) => state.admin.actionResult, shallowEqual);
    const {handleInputChange, handleSubmit} = useForm(signInRequest);

    if(actionResult && actionResult.type === 'success'){
        props.history.push('/categories');
    } else if(actionResult && actionResult.type === 'error') {
        showAlert({
            type: actionResult.type,
            title: 'LOGIN FAILED',
            text: 'Incorrect login or password',
            onClose: () => dispatch(clearActionResultAdmin()),
        });
    }

    return (
        <form onSubmit={handleSubmit}>
            <div className="login-page__container">
                <FormGroup className='form-group__login'>
                    <h3>Login</h3>
                    <input
                        required={true}
                        type="text"
                        placeholder="Login"
                        name="login"
                        className='form-input form-input__full'
                        onChange={handleInputChange}
                    />
                    <h3>Password</h3>
                    <input
                        required={true}
                        type="password"
                        placeholder="Password"
                        name="password"
                        className='form-input form-input__full'
                        onChange={handleInputChange}
                    />
                    <Button
                        type='submit'
                        text='Login'
                    />
                </FormGroup>
            </div>
        </form>
    );
};

export default Login;

Она также выдает ошибку в консоли после отправки формы входа в систему.

index.js: 1375 Предупреждение. Невозможно обновить во время существующего перехода состояния (например, в render). Методы рендеринга должны быть чистой функцией реквизита и состояния. в логине (создан Router.Consumer) в Router.Consumer (создан Route) в Route (на маршрутах / index.js: 44) в Routes (на App.js: 19) в приложении (на src / index. js: 5)

Я также заметил еще одну вещь, которую я пропустил. Я добавил console.log('inside route');, и он вызывается только один раз при загрузке страницы входа.

Так как справиться с этой ситуацией? Или я вынужден изменить механизм маршрутизации?