-
-
Notifications
You must be signed in to change notification settings - Fork 10.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Provide Implementation to pass props to routed components without render() #5391
Comments
The main devs have stated numerous times that they do not want to expand the API by adding this (or something like it). While I personally think that it would be beneficial, I also think that it is safe to say that this isn't going to be added. You still have a few approaches that you can take.
// this relies on you using the component prop
const RouteWithProps = ({ path, exact, strict, component:Component, location, ...rest }) => (
<Route
path={path}
exact={exact}
strict={strict}
location={location}
render={(props) => <Component {...props} {...rest} />}
)
// usage
<RouteWithProps component={Component} foo={bar} />
This one is more involved, but just copy the source code from here and add the ability to merge in any extra props. Maybe even release it as a package if you're feeling open sourcy. |
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. |
@pshrmn Thanks, I'll use that. @timdorr I don't think it's unworkable or untenable, it's just sort of annoying if you have a lot of routes that require render. The reason it comes up is because a lot of the people who use the package would prefer it work that way. I've got to admit I'm puzzled as to why the maintainers are so strongly opposed. |
|
@CallMeXYZ react-router-redux@next supports 4.0 |
@pshrmn Got stuck with wrapped Route component's path. const WrappedRoute = ({ component: Component, page, ...rest }) =>
<Route path={page.url} {...rest} render={props => <Component {...props} />} />; all routes translates into ones without |
<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… |
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.The text was updated successfully, but these errors were encountered: