React应用Web UI无内容渲染问题排查及修复求助

核心问题及修复方案 #

1. React Router v6 用法错误 #

你的项目使用了react-router-dom@6.9.0，但代码仍沿用v5的写法：

• v6中Route组件不再支持component属性，需替换为element并传入JSX元素
• v6默认开启精确匹配，无需再写exact属性

修复后的routes.js：

import { Route, Routes, BrowserRouter } from 'react-router-dom';
import App from '../page/index/App';

const routes = (
    <BrowserRouter>        
        <Routes>
          <Route path="/" element={<App />} />
        </Routes>
    </BrowserRouter>
);

export default routes;

2. Redux Reducer 直接修改状态 #

ChatReducer中直接赋值state = action.article违反了Redux的不可变原则，会导致状态更新无法触发组件重渲染，同时会丢失初始状态的结构。

修复后的ChatReducer.js：

const initState = {
    article: {}
};

const ChatReducer = (state = initState, action) => {
    switch (action.type) {
        case "GET_ARTICLE":
            // 返回新的状态对象，保持不可变性
            return { ...state, article: action.article };
        default:
            return state;
    }
};

export default ChatReducer;

3. 构建配置路径不一致 #

package.json中build和test脚本的--config-overrides路径与start脚本不一致，可能导致构建或测试时加载配置失败。

修复后的package.json脚本部分：

"scripts": {
    "start": "react-app-rewired start --config-overrides ./src/config/build/config-overrides.js",
    "build": "react-app-rewired build --config-overrides ./src/config/build/config-overrides.js",
    "test": "react-app-rewired test --config-overrides ./src/config/build/config-overrides.js",
    "eject": "react-app-rewired eject"
},

验证步骤 #

1. 保存所有修改后的文件
2. 重启开发服务器：npm start
3. 打开浏览器访问http://localhost:3000，应该能看到Hello World!

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