React类组件使用Link跨组件传递数据失败问题咨询

云原生阿岚

2026-9-25

解决React Router Link传state无法在目标组件获取的问题

问题核心原因

目标类组件没有拿到React Router注入的路由属性，90%以上的该类问题都是这个原因，具体解决方法和你使用的React Router版本有关。

对应解决方法

如果你用的是React Router v5

首先确认目标组件是在路由配置中通过<Route>的component/render属性直接声明的，示例如下：

<Route path="/target-path" component={TargetComponent} />

如果目标组件是嵌套的子组件、没有直接注册在Route上，需要引入withRouter高阶组件包裹目标组件，注入路由属性：

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

class TargetComponent extends React.Component {
  // 组件原有逻辑
  componentDidMount() {
    // 这样就可以拿到传递的id
    console.log(this.props.location.state)
  }
}
// 导出时用withRouter包裹
export default withRouter(TargetComponent)

如果你用的是React Router v6

v6移除了内置的withRouter，且类组件不能直接使用Hook，需要自己封装高阶组件注入路由属性：

先封装公共的withRouter高阶组件：

import { useLocation, useNavigate, useParams } from 'react-router-dom';

const withRouter = (Component) => {
  function WrappedComponent(props) {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    return <Component {...props} router={{ location, navigate, params }} />
  }
  return WrappedComponent;
}

用该高阶组件包裹目标类组件导出：

class TargetComponent extends React.Component {
  // 组件原有逻辑
  componentDidMount() {
    // 这样就可以拿到传递的id
    console.log(this.props.router.location.state)
  }
}

export default withRouter(TargetComponent)