使用react-pdf实现用户资料PDF下载时遭遇Cannot read properties of undefined (reading 'match')错误的技术求助

你遇到的这个错误，大概率是因为ParticipantProfile组件内部依赖了React Router的上下文（比如useParams、useLocation钩子，或者<Link>组件），但当你把它作为PDFDownloadLink的document属性渲染时，这个组件并没有被包裹在React Router的<Router>组件上下文里，导致那些依赖Router的API无法获取到match对象，从而抛出这个错误。

下面是两种实用的解决思路：

思路一：移除组件对Router上下文的依赖，直接传递所需参数 #

如果ParticipantProfile里的路由相关逻辑只是用来获取数据（比如从useParams拿ID再获取用户信息），那你可以在父组件（也就是index.js所在的组件）里先获取到这些数据，然后通过props直接传递给ParticipantProfile，完全绕过Router钩子。

举个例子，如果你的ParticipantProfile原来的代码是这样的：

import { useParams } from 'react-router-dom';

function ParticipantProfile() {
  const { id } = useParams();
  // 用id获取participant数据...
  return (
    <Document>
      <View> {/* 用户资料内容 */}</View>
    </Document>
  )
}

现在改成直接接收props：

function ParticipantProfile({ participant }) {
  // 直接使用传入的participant，不再依赖useParams
  return (
    <Document>
      <View> {/* 用户资料内容 */}</View>
    </Document>
  )
}

你的index.js代码保持现有写法即可，因为你已经在传递participant props了。

思路二：用MemoryRouter给PDF内的组件提供Router上下文 #

如果你的ParticipantProfile必须保留路由相关逻辑（比如某些内部跳转逻辑），那你可以用React Router提供的<MemoryRouter>组件，把ParticipantProfile包裹起来，让它能在PDF渲染时获取到Router上下文。

修改你的index.js代码如下：

import { MemoryRouter } from 'react-router-dom';

// ...其他代码

<PDFDownloadLink 
  document={
    <MemoryRouter initialEntries={[`/your-participant-route/${participant.id}`]}>
      <ParticipantProfile participant={participant} />
    </MemoryRouter>
  } 
  fileName="somename.pdf"
>
  {({ loading }) => (loading ? 'Loading document...' : 'Download now!')}
</PDFDownloadLink>

这里的initialEntries用来设置MemoryRouter的初始路由，确保ParticipantProfile里的路由钩子能拿到正确的参数（比如useParams能获取到对应ID）。

额外注意点 #

还要确认ParticipantProfile组件内部只使用了react-pdf提供的组件（比如<Document>、<View>、<Text>等），不要混用普通的HTML标签（比如<div>、<p>），否则也可能导致渲染PDF时出现其他异常。

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