mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 07:08:01 +00:00
Add Passing Props Down To React-Router Route as a react til
This commit is contained in:
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
|
|||||||
For a steady stream of TILs from a variety of rocketeers, checkout
|
For a steady stream of TILs from a variety of rocketeers, checkout
|
||||||
[til.hashrocket.com](https://til.hashrocket.com/).
|
[til.hashrocket.com](https://til.hashrocket.com/).
|
||||||
|
|
||||||
_573 TILs and counting..._
|
_574 TILs and counting..._
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -407,6 +407,7 @@ _573 TILs and counting..._
|
|||||||
### React
|
### React
|
||||||
|
|
||||||
- [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
|
- [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md)
|
||||||
|
- [Passing Props Down To React-Router Route](react/passing-props-down-to-react-router-route.md)
|
||||||
|
|
||||||
### Ruby
|
### Ruby
|
||||||
|
|
||||||
|
|||||||
29
react/passing-props-down-to-react-router-route.md
Normal file
29
react/passing-props-down-to-react-router-route.md
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
# Passing Props Down To React-Router Route
|
||||||
|
|
||||||
|
When using [react-router](https://github.com/ReactTraining/react-router),
|
||||||
|
you'll often use the `component` prop to have a certain component rendered.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
<Route
|
||||||
|
path="/my/path"
|
||||||
|
component={MyComponent}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
If, however, you need to pass props down into `MyComponent`, then you'll
|
||||||
|
want to use the `render` prop with an inline function.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
<Route
|
||||||
|
path="/my/path"
|
||||||
|
render={(routeProps) => (
|
||||||
|
<MyComponent {...routeProps} {...props} />
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
The two spread operator statements are essential. They will pass down the
|
||||||
|
[route
|
||||||
|
props](https://reacttraining.com/react-router/web/api/Route/Route-props)
|
||||||
|
that `Route` would have passed down plus the additional set of props that
|
||||||
|
you want to pass down.
|
||||||
Reference in New Issue
Block a user