如何向子路由传递prop？React路由传参技术咨询

嘿，我完全懂你遇到的这个坑！直接给<Route>组件加locationId={locationId}确实不会生效，因为React Router的component属性只会把路由相关的props（比如match、location、history）传递给目标组件，不会自动带上你自定义的属性。不过有几种简单的办法能搞定这个需求：

方法1：用render属性替代component #

这是最直接也最推荐的方式，通过render函数手动把路由props和你的自定义prop一起传递给组件：

return (
  <div>
    <Route 
      path={`${this.props.match.url}/users/:userId`} 
      render={(routeProps) => (
        <CardsShowView 
          {...routeProps} // 传递路由自带的match、location、history等props
          locationId={this.props.locationId} // 传递你的自定义prop
        />
      )} 
    />
  </div>
);

这样CardsShowView里就能同时拿到路由参数（比如this.props.match.params.userId）和locationId了。

方法2：React Router v6 写法（如果是新版本的话） #

如果你的项目已经升级到React Router v6，写法会更简洁，直接用element属性传入带props的组件即可：

return (
  <div>
    <Route 
      path={`${this.props.match.url}/users/:userId`} 
      element={<CardsShowView locationId={this.props.locationId} />} 
    />
  </div>
);

v6里不再有component和render属性，统一用element来指定要渲染的组件，自定义props直接加在组件上就行。

方法3：用withRouter高阶组件（备选） #

如果你的CardsShowView是类组件，也可以用withRouter把它包裹起来，这样组件本身就能获取路由props，然后父组件直接传递locationId即可：

首先在CardsShowView组件里：

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

class CardsShowView extends React.Component {
  // ... 组件逻辑
}

export default withRouter(CardsShowView);

然后在路由里：

return (
  <div>
    <Route 
      path={`${this.props.match.url}/users/:userId`} 
      component={(props) => <CardsShowView {...props} locationId={this.props.locationId} />}
    />
  </div>
);

不过这种方法不如render属性直接，更适合需要在多个组件里复用路由props的场景。

总的来说，方法1是最灵活且易理解的方案，推荐优先使用~

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