How can I history.pushState() and then immediately go to the page in the URL bar?

Question

I have Googled myself blind without success.

In a React Router environment, I'm trying to switch to a new view page (i.e. client-side) when the user clicks a button.

I am able to use history.pushState() to put the proper URL into the browser's navbar, but I can't figure out how to then make it go to that URL. Immediately hitting the refresh button does just what I want, but of course that's not really a solution.

So near and yet so far. I hope there's a way to do this?

Here's the history push line: history.pushState('/slides/' + 'path to an imageset')

Router config:

ReactDOM.render((
  <Router history={ browserHistory }>
    <Route path="/" component={ osconSPA } history={ browserHistory }>
      <IndexRoute name="home" component={ Home }/>
      <Route path="browse" component= { Browse }/>
      <Route path="zoomer" component= { Zoom }/>
      <Route path="zoomer/:imageId" component={ Zoom }/>
      <Route path="upload" component={ Upload }/>
      <Route path="slides" component={ SlideShow } />
      <Route path="slides/:viewSet" component={ SlideShow } />
    <Route path="*" component={ Home }/>
  </Route>
</Router>
), document.getElementById("main"))

Can you please post your React Router configuration? Are you using browserHistory or hasHistory? — jmancherje, May 09 '16 at 02:12
Are you using the `Link` component? https://github.com/reactjs/react-router/blob/master/docs/API.md#link — aray12, May 09 '16 at 02:51
I also think you are looking for `browserHistory.push('path/to')` — aray12, May 09 '16 at 02:54
I am using browserHistory. Not Link; I'm trying to move to a new view page when the user clicks a button, not a link. It works perfectly except that after I use the history.pushState() the proper URL is now in the navbar, but I have to refresh the window to post the page. — capouch, May 09 '16 at 03:40
Are you using `redux`? If so, you can use the `react-router-redux` library and it handles location state and thus you can `push` your new route and it will update browserHistory and the users location. — kwelch, May 09 '16 at 12:43
Not able to use redux yet, but the solution below fixed it, both in Chrome and the chromium library used by Electron. — capouch, May 09 '16 at 20:23

score 3 · Answer 1 · edited May 23 '17 at 10:33

I kept looking and I think I found a solution, or at least so far it seems to work flawlessly:

history.pushState('/slides/' + 'path to an imageset')
location.reload()

The above tactic, while workable, causes a server trip, which I most definitely did not want to do.

The answer was found in this post Programmatically navigate using react router

The approach below pertains to React-router version 2.2.0; there are other solutions discussed in that post for other versions.

Basically, after creating the class you define contextTypes for the component

NewClass.contextTypes = {
  router: React.PropTypes.object.isRequired
  }

Then you push the new path to the router:

handleClick() {
  this.context.router.push('/route/path')
  }

I hope someone will be able to comment as to just what the contextTypes object is doing there?

How can I history.pushState() and then immediately go to the page in the URL bar?

1 Answers1