Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(gatsby-link): add example of passing state #10137

Merged
merged 11 commits into from
Nov 28, 2018
35 changes: 33 additions & 2 deletions docs/docs/gatsby-link.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,41 @@ render () {
}
```

You can also pass state to pages when you navigate e.g. `navigate("/a-path/", { state: { pleasant: "reasonably" }}`

Note that `navigate` was previously named `navigateTo`. `navigateTo` is deprecated in Gatsby v2.

## Passing state through Link and Navigate

You can pass state to pages when you navigate, such as:

```javascript
navigate(`/a-path/`, { state: { pleasant: `reasonably` }}
```

You can also pass state to pages when you use `Link`:

```jsx
<Link
to="/another-page/"
activeStyle={{
color: "red",
}}
state={{
pleasant: "reasonably",
}}
>
```

This is accessible from the `location` object on the new page:

```javascript
componentDidMount() {
const pleasant = this.props.location.state.pleasant
this.setState({
pleasant: pleasant
})
}
```

## Prefixed paths helper

It is common to host sites in a sub-directory of a site. Gatsby lets you [set
Expand Down