React site correctly redirects to PDF on local build but not in Netlify deployment

Question

I have the following files in a React site:

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>
);

Projects.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;

I specified that the route of /research-paper should redirect to an iframe that renders a PDF viewer. This works fine when I build in my local environment, however when I deploy to Netlify, the /research-paper slug redirects to my homepage as if that route doesn't even exist. I don't understand there would be a difference in the local build versus the production build. Is this something that is Netlify-specific?

Answer 1

Solved by importing pdf as a file:

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

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

and enabling PDF imports in react-app-env.d.ts:

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