Feature Request: Implicitly pass props to Route component instead of requiring the inline function work-around

[SanzSeraph]

This problem has come up in a number of different forums. The work-around is awkward enough, and an elegant solution is simple enough, that I'm not sure why this hasn't already been implemented.

Currently, in order to pass props to a component associated with a route, you have to use the following idiom:

<Route path="/myComponent" render={(props) => <MyComponent {...props} myProp="myValue" />} />

This gets the job done, but it's not very elegant, and certainly not easy to read. This is attested to by the fact that a FAQ entry had to be created to address it. Why not just have the Route component include any extraneous props in the standard props that it passes to the component?

<Route path="/myComponent" component={MyComponent} myProp="myValue" />

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <span>{this.props.myValue}</span>;
  }
}

I'm relatively new to react, so maybe this isn't as trivial as I imagine.

[timdorr]

This has been discussed many, many, many, many, many, many times.

The short answer is this is the "React" way of doing things and was an intentional change. The pattern is so common, it now has its own page in the official docs: https://reactjs.org/docs/render-props.html

[SanzSeraph]

Yes, I'm aware that this has been the subject of much discussion. But the fact that this is the subject of an entire FAQ entry suggests that the current solution isn't very intuitive.

If we're trying to do it the "react way," then wouldn't it make more sense to take advantage of the built-in children collection? Using props to pass render functions around feels like a hack when you could do this instead:

<Route path="/my component">
  <MyComponent myProp="myVal" />
</Route>

[timdorr]

That's related to #5583. I'd check the discussion there for that.