diff --git a/README.md b/README.md index 7240635..3059c88 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_628 TILs and counting..._ +_629 TILs and counting..._ --- @@ -445,6 +445,7 @@ _628 TILs and counting..._ - [Read Only Input Elements](react/read-only-input-elements.md) - [Rendering Multiple Nodes With Fragments](react/rendering-multiple-nodes-with-fragments.md) - [Use A Ref To Autofocus An Input](react/use-a-ref-to-autofocus-an-input.md) +- [Use withRouter To Pass Down React-Router History](react/use-withrouter-to-pass-down-react-router-history.md) - [Visually Select A React Element For Inspection](react/visually-select-a-react-element-for-inspection.md) ### ReasonML diff --git a/react/use-withrouter-to-pass-down-react-router-history.md b/react/use-withrouter-to-pass-down-react-router-history.md new file mode 100644 index 0000000..6e177d9 --- /dev/null +++ b/react/use-withrouter-to-pass-down-react-router-history.md @@ -0,0 +1,28 @@ +# Use withRouter To Pass Down React-Router History + +A standard way to navigate with +[react-router](https://github.com/ReactTraining/react-router) besides using +the `Link` component is to call `history.push`. Components that are directly +rendered by a `Route` will have access to this and other router props. But +what about other components? + +The `withRouter` HOC gives us direct access to a `history` prop. + +```javascript +import React from 'react'; +import { withRouter } from 'react-router'; + +const SpecialButton = withRouter(({ history, path, text }) => { + return ( + + ) +}); +``` + +This special button component is given the `history` prop via the +`withRouter` HOC along with any props that we directly pass it. With that +we are able to directly invoke a route change using `history.push()`.