Правильный способ проверить изменения аутентификации перед загрузкой приложения с маршрутами

Question

У меня проблемы с аутентификацией Firebase в приложении ReactJs. Приложение обернуто в моем провайдере для response-redux и в моем маршрутизаторе (с response-router-dom). если я проверяю логин внутри приложения, компонент рендерит дважды, один с компонентом перед проверкой де-логина, и еще раз после проверки аутентификации.

Я хочу убрать этот побочный эффект, и моей первой идеей было обернуть весь ReactDom.render следующим образом

app.auth().onAuthStateChanged(()  => {
    ReactDOM.render(
                <App />
        , document.getElementById('root'))
})

Но затем я получаю следующее предупреждение: Предупреждение: вы не можете изменить

И мои маршруты нарушены, избегая дальнейшей навигации по СПА. Я предполагаю, что это потому, что моя проверка подлинности находится на более высоком уровне, чем мое приложение (которое содержит маршруты) или что-то в этом роде.

Чтобы сделать объяснение более понятным, полная структура будет выглядеть примерно так:

app.auth().onAuthStateChanged(()  => {
    ReactDOM.render(
        <Provider store={store()}>
            <Router history={createBrowserHistory({ basename: process.env.PUBLIC_URL })}>
               <AuthProvider>
                <App />
               </AuthProvider>
            </Router>
        </Provider>
        , document.getElementById('root'))
})

Где AuthProvider - это компонент с AuthContext.

Я достаточно искал и не нашел решения или подсказки, как избежать этого поведения. Я ожидаю, что аутентификация будет загружена перед любым рендером без нарушения маршрутов. Проблема возникает только при изменении состояния аутентификации (вход в систему и выход из системы), но если я обновляю приложение после входа в систему, маршруты снова работают идеально.

Отредактировано: просто хочу добавить мой файл "PrivateRoute":

return (
    <Route
      {...rest}
      render={routeProps =>
        !!currentUser ? <RouteComponent {...routeProps} /> : 
          registered ? <Login /> : <UserNotFound />
      }
    />
  );
};

Основная проблема заключается в том, что сначала выполняется рендеринг компонента в течение секунды, пока Firebase Auth не загрузит пользовательские данные, а затем повторно выполнит рендеринг в RouteComponent ... .