React用Webpack raw-loader导入PDF报URIError: Pathname解码错误

你碰到的URI解码报错，完全是Webpack loader配置选错导致的：

• 你加的raw-loader功能是把匹配到的文件读取为纯文本字符串向外导出。你导入../../images/SDPA_CGX.pdf之后，CGXPDF变量拿到的根本不是PDF文件的线上访问地址，而是整个PDF二进制内容转成的超长文本，开头就是PDF文件的固定标识%PDF-1.7。
• 之后你把这串超长文本传给React Router的Link组件的to属性时，组件会默认把传入值当站内路由路径做URI解码，因为这串文本里有不符合URI编码规则的二进制内容，直接触发了你看到的URIError报错。

第一步：修改错误的Webpack配置 #

把原来针对PDF的raw-loader规则替换成静态资源专用的处理规则，根据你用的Webpack版本选对应方案：

• 如果你用的是Webpack 5（当前绝大多数新项目的默认版本）：不需要安装任何第三方loader，用Webpack内置的Asset Modules规则就行，配置写法：

// webpack.config.js 的 module.rules 配置段
{
  test: /\.pdf$/,
  type: 'asset/resource'
}

这个规则会在打包时把PDF文件输出到静态资源目录，组件里导入PDF时，拿到的就是对应资源的完整可访问URL。

• 如果你用的是Webpack 4旧版本：先安装file-loader依赖，再把原来的raw-loader规则替换成file-loader配置：

{
  test: /\.pdf$/,
  use: 'file-loader',
}

第二步：调整组件的下载逻辑 #

改完loader配置后，导入PDF拿到的就是正常的静态资源URL，原来的React Router Link不会再触发解码错误。如果要实现强制触发文件下载，而不是让浏览器直接在新标签页打开PDF，更建议用原生a标签实现——毕竟React Router的Link是为站内路由跳转设计的，处理外部静态资源地址的适配性不如原生标签。
调整后的组件核心代码：

import React from "react";
import CGXPDF from "../../images/SDPA_CGX.pdf";

const PDFDownloadButton = () => {
  return (
    <a 
      href={CGXPDF} 
      download="SDPA_CGX申请表.pdf" // 这个值是下载后本地保存的文件名
      target="_blank" 
      rel="noreferrer"
    >
      Download Requisition Form
    </a>
  );
};

• 不要对PDF、图片、压缩包这类二进制静态资源使用raw-loader：这个loader只适合用来读取纯文本类文件（比如代码片段、markdown文本），用在二进制文件上不仅会出现你现在碰到的路径解析错误，还会把整个二进制内容全打进JS文件包，大幅拖慢页面加载速度。
• 如果你用的是Create React App、Vite这类开箱即用的脚手架，根本不需要手动加Webpack规则：这类脚手架已经内置了对PDF、图片等静态资源的处理逻辑，你只要把之前手动加的raw-loader规则删掉，直接在组件里导入PDF文件当URL使用就可以。
• 如果不需要强制下载，只想让用户点击后在新标签页打开PDF，去掉a标签上的download属性就行，浏览器会自动调用内置的PDF阅读器打开文件。

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