Provide Implementation to pass props to routed components without render()

After reading all of the discussion in #4942, the resolution to use render() to pass props to route components leaves devs who hope to use the now standard react/redux with some unfortunate tradeoffs. The reality of using redux with react means that you will end up with a few top-level connected components with many dumb children. A common pattern evolves wherein router definitions generally happen in connected components, which results in extensive use of render() to pass props to dumb components.

In my current project, the component prop only gets used a few times, on the top-level routers. The bulk of my routing declarations are using render, which ends up being a lot of annoying boilerplate and very verbose routing declarations. I propose this syntax, (IE the original syntax), for passing props to routed components:

<Route component={Component} foo={bar} />

Resulting in {foo: bar} as a prop on the rendered Component. I’m sure there were good reasons for the split between component and render, but because passing props to routed components ends up being the vast majority of use cases in large projects, devs end up using the counterintuitive and verbose render() method everywhere, when the older syntax would have served better.

[timdorr]

This has been discussed many, many, many times.

This is all you need:

<Route path="/abc" render={()=><TestWidget num="2" someProp={100}/>}/>

I’m not following your logic as to why that is an unworkable API. Perhaps an example makes that more clear. But other than looking different and involving a few more keystrokes, I don’t see how it’s not tenable.

[fungiboletus]

<Route path="/abc" render={()=><TestWidget num="2" someProp={100}/>}/>

It could be helpful to have this example in a good place in the documentation. It’s difficult to find the correct way to do it with the latest release, the stackoverflows comments or github’s request are often a bit old.

Also, this is quite ugly but who cares…