Gist of the Router

Router.js

import React, { useEffect } from 'react';
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
import { authUser } from './data/actions';
import { connect } from 'react-redux';

import SelectOrCreateAppContainer from './components/screens/SelectOrCreateAppContainer';
import AppAndEndpointEditorContainer from './components/screens/AppAndEndpointEditorContainer';
import AuthScreenContainer from './components/screens/AuthScreenContainer';
import PageNotFound from './components/screens/PageNotFound';

const PrivateRoute = ({ authUser, ...props }) => {
  const { loggedIn, fetching } = props;

  let apiKey = localStorage.getItem('ghd-auth');
  let { from } = props.location.state || { from: { pathname: '/' } };
 
 useEffect(() => {
    authUser(apiKey);
  }, []);

  if (loggedIn) {
    console.log('loggedIn: true');
    return <Route {...props} to={from} />;
  } else if (fetching) {
    console.log('fetching: true');
      return <p>"the else if statement"</p>
    // return null;
      return console.log("the else if statement");
  } else {
    console.log('loggedIn: false && fetching: false');
      return <p>"the else statement"</p>;
    // return <Redirect to={{ pathname: '/login', state: { from: props.location } }} />;
  }
};

const PrivateRouteConnected = connect(
  state => ({
    loggedIn: state.loggedIn,
    fetching: state.fetchingApps,
    currentError: state.currentError,
  }),
  { authUser }
)(PrivateRoute);

const Router = () => {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/login" component={AuthScreenContainer} exact />
          <PrivateRouteConnected
            path="/"
            component={SelectOrCreateAppContainer}
            exact
          />
          <PrivateRouteConnected
            path="/apps/:appName"
            component={AppAndEndpointEditorContainer}
          />
          <Route component={PageNotFound} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

export default connect(
  state => ({
    loggedIn: state.loggedIn,
    fetching: state.fetchingApps,
    currentError: state.currentError,
  }),
  { authUser }
)(Router);