React应用中使用PapaParse解析CSV文件却返回index.html的问题求助

问题原因 #

React是单页应用（SPA），开发服务器或生产环境服务器会在请求路径匹配不到对应资源时，默认返回index.html作为 fallback。你的问题出在：

• CSV文件没有放在React指定的静态资源目录，导致服务器无法正确返回该文件
• 使用相对路径./headlines.csv发起请求时，服务器找不到对应资源，最终返回了index.html

解决方案 #

方案1：将CSV移到public目录并修改路径 #

1. 把headlines.csv移动到项目根目录下的public文件夹（这是React官方规定的静态资源存放位置）
2. 修改PapaParse的请求路径为根路径：

Papa.parse("/headlines.csv", {
    download: true,
    complete: function(results, file) {
        console.log("Parsing complete:", results, file);
    }
})

方案2：通过模块导入方式使用CSV（需配置loader） #

如果不想移动文件到public目录，可以通过webpack的loader导入CSV：

1. 安装处理CSV的loader：

npm install csv-loader --save-dev

2. 在webpack配置文件中添加规则（如果使用create-react-app，需要先执行npm run eject暴露配置，或使用craco修改配置）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.csv$/,
        use: ['csv-loader']
      }
    ]
  }
}

3. 在组件中导入并使用：

import headlinesCsv from './headlines.csv';

Papa.parse(headlinesCsv, {
    download: true,
    complete: function(results, file) {
        console.log("Parsing complete:", results, file);
    }
})

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