使用npx create-react-app与d3-fetch遇异常：输出index.html而非TSV数据

嘿，我之前也踩过这个一模一样的坑！在create-react-app（CRA）里用d3-fetch拉取TSV数据，结果console.log出来的却是public/index.html的内容，核心问题其实是CRA的静态资源加载规则和你之前的非CRA React项目不一样，再加上单页应用的路由 fallback 机制在搞鬼。

问题根源 #

CRA会把项目根目录下的public文件夹作为静态资源的唯一根路径，只有这里的文件能通过URL直接访问。同时，为了支持单页应用的路由，CRA的开发服务器会把所有找不到的请求都重定向到index.html。如果你的TSV文件位置不对，或者请求路径写错，就会触发这个 fallback，导致拿到的是index.html而不是数据文件。

解决步骤 #

• 第一步：把TSV文件放到正确的位置
  必须将你的.tsv文件移到项目根目录的public文件夹下，比如public/data.tsv。CRA不会serve src目录里的静态文件，所以别把数据文件放在src里！

• 第二步：修正d3-fetch的请求路径
  请求路径要使用绝对路径（从根目录开始，前面加斜杠），这样不管你的组件在哪个路由下，请求都会指向public目录里的文件：

  import { tsv } from 'd3-fetch';
  
  tsv('/data.tsv')
    .then(data => {
      console.log('拿到正确的TSV数据:', data);
    })
    .catch(err => console.error('数据加载失败:', err));
  

  如果你之前写的是相对路径./data.tsv，当组件在嵌套路由（比如/dashboard）下时，请求路径会变成/dashboard/data.tsv，这个路径不存在，就会被重定向到index.html。

• 额外注意：检查文件名和拼写
  别忽略大小写！比如文件名叫Data.tsv但你请求的是data.tsv，在Windows开发环境可能没问题，但部署到Linux服务器或者严格的文件系统里就会找不到，同样会返回index.html。

为什么非CRA项目没问题？ #

那些项目要么没有启用单页应用的路由fallback机制，要么自定义了webpack配置，允许从src目录直接访问静态资源，所以相对路径能正常工作。但CRA的webpack配置是封装好的，严格遵循“静态资源放public”的规则，所以得按它的规矩来。

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