mirror of
https://github.com/jbranchaud/til
synced 2026-01-16 21:48:02 +00:00
Add Navigate With State Via @reach/router as a react til
This commit is contained in:
29
react/navigate-with-state-via-reach-router.md
Normal file
29
react/navigate-with-state-via-reach-router.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# Navigate With State Via @reach/router
|
||||
|
||||
With [@reach/router](https://reach.tech/router), you can programmatically
|
||||
change your route using the
|
||||
[`navigate`](https://reach.tech/router/api/navigate) function. This utilizes
|
||||
the Context API, so its available anywhere nested under your router. To
|
||||
provide some data to the destination location, include a `state` option in
|
||||
the `navigate` call.
|
||||
|
||||
```javascript
|
||||
const onSubmit = ({ data }) => {
|
||||
/* submit logic ... */
|
||||
|
||||
navigate(nextPath, { state: { data }});
|
||||
}
|
||||
```
|
||||
|
||||
The component that renders in response to this navigation will have access
|
||||
to this state.
|
||||
|
||||
```javascript
|
||||
const NextComponent = ({ location }) => {
|
||||
const { data } = location.state;
|
||||
|
||||
return (
|
||||
/* ... */
|
||||
)
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user