React路由中使用高阶组件时如何传递路由参数？

安全阿岳

2026-5-14

解决高阶组件传递路由参数的问题

你的问题核心在于高阶组件（HOC）没有接收并传递路由组件的props——当React Router渲染组件时，会自动把match、location、history这些路由相关的属性作为props传递给组件，但你的HOC完全没处理这些props，导致被包裹的ContainerComponent拿不到它们。

下面是修改后的通用HOC实现，既能保留你需要的report逻辑，又能完整传递所有props：

import React, { useEffect } from 'react'
export const withCall = (WrappedComponent, callName) => {
  // 让HOC接收所有传入的props
  const HOC = (props) => {
    useEffect(() => {
      report(callName)
    }, [callName]) // 把callName加入依赖数组，避免React依赖警告

    // 将所有props传递给被包裹的组件
    return <WrappedComponent {...props} />
  }

  // 给HOC设置显示名称，方便React DevTools调试
  HOC.displayName = `WithCall(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`
  
  return HOC
}

关键修改说明：

接收并传递props：HOC组件添加props参数，通过{...props}把所有接收到的属性（包括路由的match、location等）传递给WrappedComponent，这样ContainerComponent就能正常访问this.props.match.params了。
完善依赖数组：把callName加入useEffect的依赖数组，既符合React的hooks规则，又能保证当callName变化时重新执行report逻辑。
添加displayName：这是React HOC的最佳实践，能让你在DevTools里清晰看到组件的层级关系，而不是一堆匿名组件。