React项目本地PDF路由正常，Netlify部署后跳转至首页问题

核心原因 #

这不是Netlify特有问题，是所有静态托管平台部署单页应用(SPA)的常见路由冲突：

• 本地开发时，dev server会自动把所有前端路由请求转发到index.html，让React Router处理。
• 但Netlify默认会把/research-paper这类路径当成静态文件去查找，找不到就返回404，而你的代码里有通配路由path="*"指向首页，所以会跳转到首页。

另外你的PDFViewer组件里多余的navigate('/research-paper', { replace: true })也可能引发不必要的路由循环，建议删除。

解决步骤 #

1. 配置Netlify重定向规则 #

在项目根目录创建_redirects文件，添加以下内容：

/*    /index.html   200

这个规则会让Netlify把所有请求都转发到index.html，交给React Router处理前端路由。

或者用netlify.toml配置（如果项目已有该文件）：

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

2. 清理多余代码 #

删除PDFViewer组件中的navigate调用，因为当前组件已经挂载在/research-paper路由下，不需要再跳转：

function PDFViewer() {
  // 移除该行：navigate('/research-paper', { replace: true });

  return (
    <div>
      <iframe
        title="PDF Viewer"
        src="/static/media/Utilizing%20Machine%20Learning%20in%20Soccer%20Tactics%20Analysis.8507f31234bbe1d01322.pdf"
        width="100%"
        height="1000px"
      />
    </div>
  );
}

3. 优化PDF路径（可选） #

为了避免部署后路径问题，使用process.env.PUBLIC_URL拼接静态文件路径：

src={`${process.env.PUBLIC_URL}/static/media/Utilizing%20Machine%20Learning%20in%20Soccer%20Tactics%20Analysis.8507f31234bbe1d01322.pdf`}

验证 #

重新构建并部署到Netlify，访问/research-paper路由即可正常显示PDF。

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