Защищенный маршрут перенаправляет до завершения аутентификации

Question

Так что в основном я пытаюсь настроить защищенные маршруты.

Это мой ProtectedRoute компонент:

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';

import { authenticate } from './actions';

const ProtectedRoute = ({
  component: Component, authenticate, isAuthenticated, ...rest
}) => {
  useEffect(() => {
    authenticate();
  });

  return (
    <Route
      {...rest}
      render={props => (isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      ))
      }
    />
  );
};

ProtectedRoute.propTypes = {
  component: PropTypes.elementType.isRequired,
  authenticate: PropTypes.func.isRequired,
  isAuthenticated: PropTypes.bool.isRequired,
};

const mapStateToProps = state => ({
  isAuthenticated: state.isAuthenticated,
});

export default connect(mapStateToProps, { authenticate })(ProtectedRoute);

, а вот authenticate action:

const authenticate = () => dispatch => axios('http://localhost:8080/user', {
  method: 'get',
  withCredentials: true,
}).then((response) => {
  dispatch({ type: 'AUTHENTICATE_SUCCESS', payload: response.data });
}).catch((error) => {
  dispatch({ type: 'AUTHENTICATE_FAILURE' });
  throw (error);
});

Но, к сожалению, он не работает, потому что он перенаправляет при рендеринге до завершения процесса аутентификации.Что я мог сделать, чтобы решить эту проблему?Должен ли я добавить дополнительный логический параметр, чтобы проверить, выполняется ли процесс аутентификации, перед тем как что-либо делать?Или есть лучший способ?