React 站点在本地构建中正确重定向到 PDF，但在 Netlify 部署中则不然

Question

我在 React 站点中有以下文件：

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Route, Routes, useNavigate } from "react-router-dom";
import Homepage from './pages/Homepage';
import Projects from './pages/Projects';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

function PDFViewer() {
  const navigate = useNavigate();

  // Change the physical URL slug to '/resume'
  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>
  );
}

root.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path="/research-paper" element={<PDFViewer />} />
        <Route path="/" element={<Homepage />} />
        <Route path="/projects" element={<Projects />} />
        <Route path="*" element={<Homepage />} />
      </Routes>
    </Router>
  </React.StrictMode>
);

项目.tsx

import Navbar from '../components/Navbar';
import Project from '../components/Project';
import { useMediaQuery } from 'react-responsive'

const Projects = () => {

  return (
    <div>
      <Navbar />
      <div>
        <h1>Research</h1>
        <br />
        <Project title="Research Paper" link="/research-paper"/>
        <br />
      </div>
    </div>
  );
};

export default Projects;

我指定 /research-paper 的路径应重定向到呈现 PDF 查看器的 iframe。当我在本地环境中构建时，这工作得很好，但是当我部署到 Netlify 时，/research-paper slug 会重定向到我的主页，就好像该路由根本不存在一样。我不明白本地构建与生产构建会有什么不同。这是 Netlify 特有的东西吗？

Answer 1

通过将pdf导入为文件来解决：

import PDF from '../media/paper.pdf'

return (
        <div>
            <iframe
                title="PDF Viewer"
                src={PDF}
                width="100%"
                height="1000px"
            />
        </div>
    );

并在react-app-env.d.ts中启用PDF导入：

/// <reference types="react-scripts" />
declare module "*.pdf";