How to use react router to pass props to handler component

在React Router中，当您想要将props传递给一个路由处理的组件时，有几种方式可以实现这一点。以下将详细说明几种常用的方法：

1. 使用render方法

在React Router中，您可以在Route组件中使用render属性来传递额外的props。这里的render方法可以访问到路由的props（比如match，location，history），同时还可以传递自定义的props。

jsx
<Route path="/example" render={(routeProps) => (
  <ExampleComponent {...routeProps} extraProp="value" />
)} />

在这个例子中，ExampleComponent不仅接收到了由React Router传递的路由相关props（如match，location和history），还接收到了一个额外的prop extraProp。

2. 使用component属性和高阶组件（HOC）

如果您不想在每一个Route中都写render方法，可以考虑使用高阶组件（HOC）来封装您要传递的props。

首先创建一个高阶组件：

jsx
function withMyProps(Component, extraProps) {
  return function(props) {
    return <Component {...props} {...extraProps} />;
  };
}

然后在使用Route时：

jsx
const EnhancedComponent = withMyProps(ExampleComponent, { extraProp: 'value' });
<Route path="/example" component={EnhancedComponent} />

这样，ExampleComponent既获得了从React Router传递的props，也获得了通过HOC传递的extraProp。

3. 使用children属性

与render类似，children属性也可以用来传递props，不管Route的path是否与当前location匹配，children函数都会被调用。

jsx
<Route path="/example" children={(routeProps) => (
  <ExampleComponent {...routeProps} extraProp="value" />
)} />

这也是一种灵活的方式来传递props，并且ExampleComponent会始终被渲染，与路由匹配与否无关。

总结

上述方法中，使用render和children方法比较直接，适用于需要对传递到组件的props进行精细控制的情况。而通过高阶组件的方式则更适合那些需要全局或在多个地方重用的逻辑，可以有效地减少代码重复并提高代码的可维护性。

每种方法都有其适用场合，根据具体需求选择最合适的实现方式。