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: gatsby@2.0.22

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.

#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

[mikessc]

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

componentDidMount solves it

[Redskinsjo]

In my case, neither in window.history.state nor location (trying with both reach router and gatsby) the state is to be found. Someone have the same problem ?

[feedm3]

I'm having mostly the same problem. Regardless of passing the state via GatbsyLink or navigate(), on the production build sometimes a wrong state gets passed. The wrong state looks like this:

{
	"key": "1614097608725"
}

It's more or less 50% of the time I have the correct state in the location.state or the wrong one :(
In development mode I haven't seen this error.

[YashKumarVerma]

I'm having mostly the same problem. Regardless of passing the state via GatbsyLink or navigate(), on the production build sometimes a wrong state gets passed. The wrong state looks like this:

{
	"key": "1614097608725"
}

It's more or less 50% of the time I have the correct state in the location.state or the wrong one :(
In development mode I haven't seen this error.

I get a similar output

[nickgrealy]

I had a similar issue e.g. I got the "key": "1614097608725", and the state only worked first time. (like @YashKumarVerma)

I was using an onClick event on an Anchor - turns out the problem was the href="#" part.

<a href="#" onClick={ () => navigate('/here', { state: { foo: 'bar' } } ) }>Forgot Password?</a>

Removing that, fixed the issue.

<a className="link" onClick={ () => navigate('/here', { state: { foo: 'bar' } } ) }>Forgot Password?</a>

[djaramilloj]

In my case, the problem was that I was trying to navigate to a subroute (Ex. '/app/home').
props.location.state started to show data only after I changed the navigation to single routes (Ex. '/home').

[abemedia]

I have the same issue. I moved a page into a subdirectory and the state stopped working. Moving it back has fixed this.