函数式组件能否使用HOC？类转函数组件后location、match未定义问题

DevOps 小满

2026-10-6

问题原因

核心问题是 React Router v6 已移除withRouter高阶组件，你保留的原类组件导出写法不再生效，无法给组件props注入location、match属性，因此解构时这两个值为undefined。
如果你仍在使用 React Router v5，需确认组件是否挂载在Router组件的上下文子树内，脱离路由上下文时withRouter也无法注入路由属性。

修复方案（适配函数组件的Hook写法，符合你的使用需求）

你不需要再依赖withRouter和connect注入属性，直接使用对应框架提供的Hook获取所需值即可，步骤如下：

导入所需Hook

import { useLocation, useParams } from 'react-router-dom'
import { useDispatch } from 'react-redux'

组件内部调用Hook获取对应值，替换原props解构逻辑

const DocumentPreview = () => { // 甚至不需要接收props参数
  const location = useLocation()
  const params = useParams()
  const dispatch = useDispatch()
  // 原有state逻辑不变
  const [state, setState] = useState({
    // 原有state定义不变
  })

  const getDocument = async () => {
    // 直接使用hook拿到的变量，不需要从props解构
    const search = location.search
    // params直接就是原match.params的值
    const options = parseUrlParams(search);

    setState({ onRequest: true });
    showDocumentPreviewRequest(params.id, {
        employeeId: options.employee,
        dispatch,
        successCallback: handleSuccessIndex
    });
  }
  // 其余逻辑不变
}