Gatsby: State not passed between pages when using "navigate" or "<Link>"

[alec-francis]

Hi all,

I have been unsuccessful in my attempts to pass the state between pages in my Gatsby v2 application.

Here is my attempt using the "Link" component:

<Link to="/text-editor/" state={{docId: "123"}}>Edit</Link>

On my "text-editor" page I run:

componentDidMount(){
  console.log(this.props);
}

Unfortunately the object logged to the console is a blank object.

I then tried to use the "navigate" method instead:

actionMenuEditHandler(){
    navigate('/text-editor/',
      {
        state: {
          docId: "123",
        },
      }
    );
  }

But unfortunately the object logged to the console is a blank object again.

Is anyone else experiencing this issue? I'm using: [email protected]

Cheers,

Alex

[alec-francis]

Update:

I just found the state data located at:

window.history.state

I will close the issue in a few days to give anyone time to correct me if I'm doing this wrong.

Cheers,

Alex

[LekoArts]

Try the location, as explained here:
https://reach.tech/router/api/Link

[alec-francis]

Thanks for the response.

I just tested by logging the window.location object to my console but I did not find the state data in it. I think that in the pull request linked below by "nsimonson" passed the location state data into the history object.

https://github.com/gatsbyjs/gatsby/pull/3802

So perhaps accessing the state data via window.history.state is the correct way for Gatsby.

Cheers,

Alex

[yepstein1]

Alec,
thanks for this post it was very helpful- It's just odd to me that on their gatsby documentation it just uses plain 'location' and not window.history.state.

[tkim90]

Just spent hours trying to get this working 😅 Glad I found this

[brootle]

It's funny that I ended up here after example from Gatsby documentation didn't work https://www.gatsbyjs.com/docs/gatsby-link/#how-to-use-the-navigate-helper-function
Just keep in mind that your gatsby build will fail because there is no window during server side rendering, unless you do some checks