1
0
mirror of https://github.com/jbranchaud/til synced 2026-01-05 16:18:01 +00:00

Add Accessing Location Within @reach/router as a react til

This commit is contained in:
jbranchaud
2018-12-14 15:14:20 -06:00
parent 050de89cdc
commit 7966442e49
2 changed files with 27 additions and 1 deletions

View File

@@ -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/).
_731 TILs and counting..._
_732 TILs and counting..._
---
@@ -477,6 +477,7 @@ _731 TILs and counting..._
- [A Component Is Just A Bag Of Data](react/a-component-is-just-a-bag-of-data.md)
- [Access The Latest Lifecycle Methods In An Old App](react/access-the-latest-lifecycle-methods-in-an-old-app.md)
- [Accessing Env Vars In create-react-app](react/accessing-env-vars-in-create-react-app.md)
- [Accessing Location Within @reach/router](react/accessing-location-within-reach-router.md)
- [Allow md As An Extension With gatsby-mdx](react/allow-md-as-an-extension-with-gatsby-mdx.md)
- [Alter The Display Name Of A Component](react/alter-the-display-name-of-a-component.md)
- [Building A React App In The Browser](react/building-a-react-app-in-the-browser.md)

View File

@@ -0,0 +1,25 @@
# Accessing Location Within @reach/router
The API of [`@reach/router`](https://reach.tech/router) departs a bit from
[`react-router`](https://reacttraining.com/react-router/) in a couple ways.
The `location` prop which you may be used to having access to automatically
is instead available through the
[`Location`](https://reach.tech/router/api/Location) component.
```react
import React from 'react';
import { Location } from '@reach/router';
const MyComponent = () => {
return (
<Location>
{({ location }) => {
return <p>Current Location: {location.pathname}</p>;
}}
</Location>
);
}
```
This is a contrived example, but you can imagine how you'd use it to access
`state` or even create an HOC similar to `withRouter`.