add push/pop to history

[ryanflorence]

gatsbyjs/gatsby/issues/5656

[sergical]

Would love to see this type of API enabled. I am building an application that is targeting users with disabilities. The context it would be used in, as an example, after submitting a form, I'd want to redirect a user to a different page, so

handleFormSubmit = e => {
  e.preventDefault();
  this.submitForm(data, (err, res) => {
    if (!err) {
      history.push('/profile');
      // I don't think I can use the Redirect component from the API in this case
    }
  })
}

Or is there a better pattern I should be implementing?

[GainorB]

import { navigate } from "@reach/router"

handleFormSubmit = e => {
  e.preventDefault();
  this.submitForm(data, (err, res) => {
    if (!err) {
      navigate('/profile')
    }
  })
}

Did you try using the navigate? Seems like your use case is perfect for it

[DylanVann]

Possibly related issue: gatsbyjs/gatsby#7454 (comment)

[thebigredgeek]

@ryanflorence ^ Yeah that's definitely a big use case for this, making sure we allow for standard browser behavior when people click links. As you mentioned on gatsbyjs/gatsby#5656, we could technically work around this with a hash table but it seems like this is something the routing component provides. Thoughts?

[KyleAMathews]

Here's the temp fix I made in Gatsby for this gatsbyjs/gatsby#7758

[ryanflorence]

Added, but I encourage people to track location keys instead--an unseen key is PUSH, everything else is pop.

Relying only on "POP" is potentially broken since users can pop to any spot in the history stack (click and hold the back/forward button and choose something down the list). You'll want to inspect the keys to see how far back or forward the user went and act on that delta rather than just a naive pop.