React应用启用DrugRecommendation路由后空白屏问题排查

1. 校验路由配置正确性 #

先确认App.js中的路由语法无错误，组件导入和路由标签需符合React Router对应版本要求：

// React Router v6+ 正确示例
import DrugRecommendation from './DrugRecommendation';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 其他业务路由 */}
        <Route path="/drug-recommendation" element={<DrugRecommendation />} />
        {/* 通配符路由需放在最后，避免覆盖具体路由 */}
        <Route path="*" element={<div>页面不存在</div>} />
      </Routes>
    </BrowserRouter>
  );
}

若使用React Router v5及以下，需将element替换为component，同时调整路由嵌套写法。

2. 修复CSV读取逻辑的阻塞/异常问题 #

页面空白无报错，大概率是组件初始化时的CSV读取逻辑未处理异步状态，导致渲染异常。

第一步：修正CSV读取方法 #

确保drugsData.js中的parseCSV为异步方法，且正确读取public目录下的CSV文件（React仅会打包src目录文件，本地静态资源需放在public下）：

// drugsData.js
export async function parseCSV() {
  try {
    // 确保drugs.csv放在项目根目录的public文件夹中
    const res = await fetch('/drugs.csv');
    if (!res.ok) throw new Error('CSV文件加载失败');
    
    const csvText = await res.text();
    // 基础CSV解析逻辑（可根据实际格式调整）
    const rows = csvText.split('\n').filter(row => row.trim());
    const headers = rows[0].split(',').map(h => h.trim());
    
    return rows.slice(1).map(row => {
      const values = row.split(',').map(v => v.trim());
      return headers.reduce((obj, key, idx) => {
        obj[key] = values[idx];
        return obj;
      }, {});
    });
  } catch (err) {
    console.error('CSV解析错误:', err);
    return [];
  }
}

第二步：组件中处理异步加载状态 #

在DrugRecommendation组件中通过useState和useEffect管理数据加载状态，避免渲染未初始化的数据：

import { useState, useEffect } from 'react';
import { parseCSV } from './drugsData';

function DrugRecommendation() {
  const [drugList, setDrugList] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const loadDrugData = async () => {
      const data = await parseCSV();
      setDrugList(data);
      setIsLoading(false);
    };
    loadDrugData();
  }, []);

  // 加载状态下给出提示，避免页面空白
  if (isLoading) return <div>药物数据加载中...</div>;

  // 后续病症输入与推荐逻辑
  return (
    <div className="drug-recommendation">
      {/* 输入框、推荐结果展示等组件内容 */}
    </div>
  );
}

export default DrugRecommendation;

3. 排查隐藏渲染错误 #

打开浏览器控制台的Sources面板，在DrugRecommendation组件的渲染逻辑处设置断点，或开启React严格模式暴露潜在问题：

// index.js
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

4. 确认CSV文件路径有效性 #

确保CSV文件放置在项目的public目录下，若路径错误，fetch会返回404错误，但可能因未捕获异常导致无报错提示，需依赖parseCSV中的错误捕获逻辑暴露问题。

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