React 应用程序与 Firebase 在路由更改时闪烁答案

【问题标题】：React app with Firebase flickering on route changeReact 应用程序与 Firebase 在路由更改时闪烁
【发布时间】：2021-12-04 12:07:14
【问题描述】：

我正在创建一个使用 Firebase 进行身份验证的 React 应用。现在，每个路线更改都会导致 1 秒延迟和屏幕闪烁。我将其追溯到每次页面加载时调用的 firebase.initializeApp 函数。有什么办法可以减轻或完全避免这种行为？我的 react 应用程序非常简单，由 ChakraUI 和 react-router-dom 组成，但这是我的 firebase 配置：

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

const clientCredentials = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

if (!firebase.apps.length) {
  // This line gets called every route change
  firebase.initializeApp(clientCredentials);
}

export default firebase;

【问题讨论】：

标签： reactjs firebase firebase-authentication react-router-dom flicker

【解决方案1】：

这很尴尬，但答案不一定与 Firebase 相关。在我的组件库 (ChakraUI) 中，链接实际上呈现为传统的 <a> 标签，默认情况下会在 React 中触发整页刷新。这让我的问题变得有意义，因为当应用程序硬重新加载时，firebase 需要一直初始化。将我的内部/ChakraUI 链接组件转换为正确使用 react-router-dom <Link> 解决了这个问题，方法是不强制刷新整页并且 firebase 保持初始化。希望我的愚蠢错误将来能帮助某人！

【讨论】：