React-router: Page refresh breaks with Router.HistoryLocation

[0x80]

I'm using React 0.13.1 with router 0.13.2

When I try to use the HistoryLocation like this:

Router.run(routes, Router.HistoryLocation, (Handler) => {
  React.render(<Handler />, document.getElementById('app'));
});

It works fine, until I hit the page refresh button. Then I get a 404 on the route. I'm only using simple routes atm

<Route handler={App} path="/">
    <DefaultRoute handler={Home} name="home" />
    <Route handler={About} name="about" />
    <Route handler={Features} name="features" />
    <NotFoundRoute handler={NotFound} name="not-found" />
  </Route>

[schickling]

Same here!

[EdwardReed]

110

[0x80]

So we can work around this by specifying the paths explicitely, but routes without the path property set should just work with history api without any workaround right? I would still consider this a bug.

[failpunk]

This is still an issue.

[SubatomicHero]

Im having the same issue.

[SubatomicHero]

"Reading the current state

When your page loads, it might have a non-null state object. This can happen, for example, if the page sets a state object (using pushState() or replaceState()) and then the user restarts their browser. When your page reloads, the page will receive an onload event, but no popstate event. However, if you read the history.state property, you'll get back the state object you would have gotten if a popstate had fired.

You can read the state of the current history entry without waiting for a popstate event using the history.state property like this:

var currentState = history.state;"

I was reading this from Mozillas site. Has this been considered?

[ryanflorence]

I'm going to guess your server isn't configured to work with history location. All urls need to serve the same page.

https://rackt.github.io/react-router/#HistoryLocation

If you think you have your server configured, then please ask to reopen.

[0x80]

I was testing with webpack-dev-server. Not sure how this express catch all route applies to that. I'll give it another try.

[taurose]

For webpack-dev-server you can use the historyApiFallback option. Here's a write-up: http://jaketrent.com/post/pushstate-webpack-dev-server/

[0x80]

Wonderful! Thanks :+1:

[mvnnn]

I am having the same issue. "react": "~0.14.3" but i am using gulp in my project.

[0x80]

@mvnnn This is not related to your build tool like Gulp. Whatever you're using to serve the static files needs to implement the historyApiFallback kind of mechanism. All request that are not targeting files must be served the index.html file. It could be webpack-dev-server, express, nginx, apache...