React应用部署后显示空白页面：本地Chrome正常、Edge/移动端/其他设备异常及Redux报错求助

一、修复Edge浏览器的Redux报错 #

你遇到的Cannot read properties of undefined (reading 'apply')错误，大概率是Redux与Redux-Persist版本不兼容，或者Store配置存在疏漏。可以按以下步骤排查：

1. 对齐依赖版本
   打开package.json，确认redux、react-redux和redux-persist的版本是否匹配。比如Redux 4.x需要搭配redux-persist ^6.0.0版本。如果版本混乱，建议卸载后重新安装兼容版本：

   npm uninstall redux react-redux redux-persist
   npm install redux@^4.2.1 react-redux@^8.1.3 redux-persist@^6.0.0
   

2. 检查Store配置文件（store.js）
   这个报错常出现在持久化Reducer的配置环节，比如遗漏了compose或applyMiddleware的正确使用。确保你的store.js结构类似这样：

   import { createStore, applyMiddleware, compose } from 'redux';
   import { persistStore, persistReducer } from 'redux-persist';
   import storage from 'redux-persist/lib/storage'; // 默认使用localStorage
   import rootReducer from './reducers'; // 你的根Reducer
   
   const persistConfig = {
     key: 'root',
     storage,
     // 可选：设置不需要持久化的Reducer，比如blacklist: ['tempReducer']
   };
   
   const persistedReducer = persistReducer(persistConfig, rootReducer);
   
   // 区分环境配置Redux DevTools（生产环境关闭）
   const composeEnhancers = process.env.NODE_ENV === 'production'
     ? compose
     : window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
   
   export const store = createStore(
     persistedReducer,
     composeEnhancers(applyMiddleware()) // 这里可以添加你的中间件，比如redux-thunk
   );
   
   export const persistor = persistStore(store);
   

   重点确认：是否正确导入applyMiddleware和compose，并在创建Store时正确使用了composeEnhancers。

二、解决部署后空白页问题 #

你已经尝试了HashRouter和homepage配置，但仍有空白页，建议从以下方向深挖：

1. 确认homepage配置准确性
   你的应用部署在根域名http://dorian1.com/，所以package.json里的homepage应该设置为：

   "homepage": "http://dorian1.com/"
   

   或者更简洁的根路径配置：

   "homepage": "/"
   

   配置完成后重新执行npm run build，再部署打包后的build文件夹内容。

2. 确保HashRouter完全替换BrowserRouter
   确认你已经彻底替换了Router的导入方式：

   // 替换前
   import { BrowserRouter as Router, Switch, Route} from 'react-router-dom'
   // 替换后
   import { HashRouter as Router, Switch, Route} from 'react-router-dom'
   

   注意：如果使用的是react-router-dom v6版本，Switch已经被Routes替代，这也会导致生产环境路由失效。若版本是v6，需要修改路由写法：

   // react-router-dom v6写法示例
   import { HashRouter as Router, Routes, Route} from 'react-router-dom'
   
   // ...
   <Routes>
     <Route path='/' element={<News />}/>
     <Route path='/News' element={<News />}/>
     {/* 其他路由同理修改 */}
   </Routes>
   

3. 检查生产环境资源加载状态
   部署后打开浏览器控制台的Network标签，查看所有静态资源（JS、CSS、图片等）的加载状态。如果出现404错误，说明资源路径配置有误，此时需要再次确认homepage配置，或检查打包工具的publicPath设置。

4. Redux-Persist生产环境适配
   生产环境中，redux-persist可能因序列化问题导致应用卡死。可以在persistConfig中显式添加序列化配置：

   const persistConfig = {
     key: 'root',
     storage,
     serialize: (data) => JSON.stringify(data),
     deserialize: (str) => JSON.parse(str),
   };
   

三、额外排查点 #

• React 18适配：如果你使用的是React 18，建议将ReactDOM.render替换为createRoot，这能解决部分浏览器的兼容问题：

  import React from 'react';
  import { createRoot } from 'react-dom/client';
  import App from './App';
  import { Provider } from 'react-redux'
  import {store, persistor} from './store'
  import { PersistGate } from 'redux-persist/integration/react'
  
  const container = document.getElementById('root');
  const root = createRoot(container);
  root.render(
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  );
  

按照以上步骤逐一排查，应该能解决你的Edge兼容和部署空白页问题。

内容的提问来源于stack exchange，提问作者Stanciu Dorian