React点击按钮跳转新页加载PDF失败及Hook报错求助

你遇到的Invalid hook call错误，是因为把PdfViewer组件直接作为按钮的onClick回调函数调用了。React Hooks（比如useState）必须在函数组件的顶层作用域内调用，不能在普通的事件回调函数里执行组件代码——你直接调用PdfViewer()相当于在事件回调里执行了组件的Hooks，违反了Hooks规则，所以触发错误。

要实现点击按钮在新标签页展示PDF，有两种简单可行的方式：

方式一：直接打开PDF文件（最简便） #

如果不需要自定义PDF展示界面，直接通过浏览器默认的PDF阅读器打开即可。只需修改按钮的onClick事件，用window.open打开PDF的静态资源路径：

注意：确保你的PDF文件放在React项目的public目录下（比如public/pdfs/Mini_Case_Study_15.pdf），这样路径才能正确访问。

修改后的按钮代码：

<button onClick={() => window.open('/pdfs/Mini_Case_Study_15.pdf', '_blank')} className="btn">Preview</button>

方式二：通过路由跳转至自定义PDF展示页面 #

如果需要自定义PDF的展示样式（比如添加分页控件），可以用React Router跳转到专门的页面渲染PdfViewer组件：

步骤1：安装React Router #

npm install react-router-dom

步骤2：配置路由 #

在项目的根组件（比如App.js）中添加路由配置：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ProjectDetails from './path/to/ProjectDetails'; // 替换成你的组件实际路径
import PdfPreviewPage from './PdfPreviewPage'; // 新建的PDF预览页面

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/projects" element={<ProjectDetails />} />
        <Route path="/pdf-preview" element={<PdfPreviewPage />} />
      </Routes>
    </Router>
  );
}

export default App;

步骤3：新建PDF预览页面组件（PdfPreviewPage.js） #

import PdfViewer from './PdfViewer';

function PdfPreviewPage() {
  return (
    <div className="pdf-preview-container">
      <h2>PDF Preview</h2>
      <PdfViewer />
    </div>
  );
}

export default PdfPreviewPage;

步骤4：修正PdfViewer组件的小错误 #

你的onDocumentLoadSuccess函数里有个笔误，应该把numPage改成numPages：

function onDocumentLoadSuccess({numPages}) {
    setNumPages(numPages); // 原代码是numPage，这里修正为numPages
    setPageNumber(1);
}

步骤5：修改ProjectDetails中的按钮 #

用useNavigate钩子跳转至PDF预览页面（或用Link组件）：

import "../styles/ProjectDetails.css";
import React from 'react'
import { useNavigate } from 'react-router-dom'; // 引入useNavigate

const ProjectDetails = ({ project }) => {
  const navigate = useNavigate();

  return (
    <div className="card-grid">
      {/* 其他代码保持不变 */}
      <div className="card-footer">
        <button className="btn">Details</button>
        {project.assignment_type === 'Mini Case Studies' &&
          <>
            <button className="btn btn-outline">Download</button>
            {/* 用navigate跳转，target="_blank"打开新标签页 */}
            <button onClick={() => navigate('/pdf-preview', { target: '_blank' })} className="btn">Preview</button>
            {/* 或者用Link组件：<Link to="/pdf-preview" target="_blank" className="btn">Preview</Link> */}
          </>
        }
      </div>
    </div>
  )
}

export default ProjectDetails

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