mirror of
https://github.com/jbranchaud/til
synced 2026-01-05 08:08:02 +00:00
Add Accessing Location Within @reach/router as a react til
This commit is contained in:
25
react/accessing-location-within-reach-router.md
Normal file
25
react/accessing-location-within-reach-router.md
Normal 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`.
|
||||
Reference in New Issue
Block a user