我在这个社交媒体MERN网站上工作。我使用redux-persist来存储更新后的状态。下面我给出了来自三个不同文件的三个代码片段。

• • 下面是我的redux-persist代码：**

import { configureStore } from "@reduxjs/toolkit";
import {
  persistStore,
  persistReducer,
  FLUSH,
  PERSIST,
  REGISTER,
  PAUSE,
  PURGE,
  REHYDRATE,
} from "redux-persist";
import storage from "redux-persist/lib/storage";
import authReducer from "./state";

const persistConfig = {
  key: "root",
  storage,
};

export const persistedReducer = persistReducer(persistConfig, authReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => {
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE],
      },
    })
  },
});

export const persistor = persistStore(store);

• • 现在我使用src/index.js文件中的"store"和"persistor"：**

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import {store, persistor} from "./persistor";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

• • 下面是App.js代码：**

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { useMemo } from "react";
import { useSelector } from "react-redux";
import { createTheme } from "@mui/material/styles";
import { ThemeProvider, CssBaseline } from "@mui/material";

// import Sample from "./Sample";
import HomePage from "./scenes/HomePage/HomePage";
import LoginPage from "./scenes/LoginPage/LoginPage";
import ProfilePage from "./scenes/ProfilePage/ProfilePage";
import { themeSettings } from "./theme";

function App() {
  const mode = useSelector((state) => state.mode);
  const theme = useMemo(() => {
    createTheme(themeSettings(mode));
  }, [mode]);

  return (
    <>
      <BrowserRouter>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/login" element={<LoginPage />} />
            <Route path="/profile/:username" element={<ProfilePage />} />
          </Routes>
        </ThemeProvider>
      </BrowserRouter>
    </>
  );
}

export default App;

我试过删除redux-persist和MUI themeProvider，应用运行正常，问题是添加redux-persist后屏幕变成空白（当我检查网站时，白屏和根div是空的），我在网上看到了redux-persist的文档和一些博客，根据我的理解实现了redux-persist，现在我不知道问题是redux-persist还是MUI themeProvider。
请帮助我解决此问题。
下面是我的代码的github repo：https://github.com/ppratham0811/Sociopedia-project
谢谢
我只是想让redux-persistent正常工作，而不是显示空白屏幕。