How to use react router to pass props to handler component

In React Router, when you want to pass props to a route component, there are several ways to achieve this. The following details several common methods:

1. Using the render Method

In React Router, you can use the render prop in the Route component to pass additional props. The render method can access route-related props (such as match, location, and history), and also pass custom props.

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

In this example, ExampleComponent receives not only the route-related props passed by React Router (such as match, location, and history), but also an additional prop extraProp.

2. Using the component Prop and Higher-Order Components (HOC)

If you don't want to write the render method in every Route, consider using Higher-Order Components (HOC) to encapsulate the props you want to pass.

First, create a Higher-Order Component:

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

Then, when using Route:

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

In this way, ExampleComponent receives not only the props passed by React Router but also the extraProp passed through the HOC.

3. Using the children Prop

Similar to render, the children prop can also be used to pass props. Regardless of whether the Route's path matches the current location, the children function is called.

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

This is also a flexible way to pass props, and ExampleComponent is always rendered regardless of whether the route matches.

Summary

Among the above methods, using the render and children methods is more straightforward and suitable for scenarios where you need fine-grained control over the props passed to the component. Using Higher-Order Components is better suited for logic that needs to be reused globally or in multiple places, effectively reducing code duplication and improving maintainability.

Each method has its appropriate use case, and you should choose the most suitable implementation based on specific requirements.