You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Sometimes, I have a component that I want to render in a Route, but make it reusable in such a way that it doesn't have to know about the URL structure that it is in. For example, consider a Twitter clone's UserProfile component:
// Somewhere in the app:<Routepath="/users/:userId"component={UserProfile}/>letUserProfile=({match})=>{return<div>{/* ... user profile stuff ... */}<Routepath={match.path+"/followers"}component={UserFollowers}/></div>}
The UserFollowers component needs access to the userId of the user to show their followers, and it can get that from match.params, but what if we also have some kind of dashboard that displays the currently logged-in user's followers?
// Somewhere in the app:<Routepath="/dashboard/"component={Dashboard}/>letDashboard=({match})=>{// ... Somehow obtain the userIdreturn<div>{/* ... dashboard stuff ... */}<Routepath={match.path+"/followers"}component={UserFollowers}/></div>}
In order to pass the userId variable to UserFollowers, I'd need to use render, and create a whole new function, just to pass the prop to my component. Or, I'd have to use a HOC like recompose's withProps. Both of these options work, but I think it'd be more elegant to just have a way to pass props through via Route.
The text was updated successfully, but these errors were encountered:
<Route path="/abc" render={(props) => <TestWidget {...props} someProp={100} />} />
is more complete as it forwards the default props as well (e.g: match prop).
The concept
Allow passing props to
Route
to be passed to the component it renders. For example:In that case, if the route matched,
MyComponent
would be rendered as follows:Or, if you don't like
Route
accepting arbitrary properties, maybe we can achieve the same with something like:Use case
Sometimes, I have a component that I want to render in a Route, but make it reusable in such a way that it doesn't have to know about the URL structure that it is in. For example, consider a Twitter clone's
UserProfile
component:The
UserFollowers
component needs access to theuserId
of the user to show their followers, and it can get that frommatch.params
, but what if we also have some kind of dashboard that displays the currently logged-in user's followers?In order to pass the
userId
variable toUserFollowers
, I'd need to userender
, and create a whole new function, just to pass the prop to my component. Or, I'd have to use a HOC like recompose'swithProps
. Both of these options work, but I think it'd be more elegant to just have a way to pass props through viaRoute
.The text was updated successfully, but these errors were encountered: