Legacy Browser Support

[bitsoglass]

Are there any plans to support IE 8 with this router? React officially supports IE 8 but as it stands this router doesn't seem to. I am working on it a bit myself, but wanted to see if there are any official plans.

[simenbrekken]

I've been using the excellent HTML5 History API Polyfill for a few projects. The only change I've had to do in other routing libraries is reference the location object before using it:

var location = window.history.location || window.location;

[ryanflorence]

Using hash locations should be fine. If not, there is a bug. Can you verify if these demos are broken?

http://rpflorence.github.io/react-nested-router/examples/query-params

[bitsoglass]

That example throws an error that the method isArray is not supported. So, the examples aren't using the es5-shim.js polyfill that is needed to support old browsers.

I have been using hash locations anyways. The problem comes that I have to explicitly hit refresh to get the page to load after calling transitionTo.

[ryanflorence]

For the record, we absolutely want to support what react supports, we just haven't done all of the work yet!

[mjackson]

@bitsoglass I'm confused. Why does IE8 need the refresh?

[ryanflorence]

It doesn't support pushState.

See #50

tl;dr - instead of falling back to hashes when using location="history", you fall back to full page reloads so that users on new and legacy browsers can share identical urls.

[bitsoglass]

I'm already using hashes and am currently looking into why a refresh might have been needed.

From what I have found so far window.addEventListener is not supported in IE 8 and window.attachEvent is needed instead. Also, hashchange is not a valid listener for IE 8 it needs to be onhashchange which was causing notifyChange not to fire. I'm about to run some tests and see if that fixes my refresh issue, which I am fairly confident it will.

[ryanflorence]

Two things are going on here:

1. We don't fall back to anything when using location="history"
2. We are using code like Array.isArray and addEventListener that IE8 doesn't support.

@bitsoglass I would only try to solve (2) here, we are discussing a solution to (1) in #50.

[bitsoglass]

Array.isArray is already solved by using es5-shim.js as documented by React here.

Which users interested in supporting IE 8 should already be including for the purposes of using React in the first place.

Also, I have figured out how to test for addEventListener and fix it in IE8. This did fix the reload issue as well so there is no need any longer to do so.

I will submit a pull request with the check and fix for addEventListener in IE 8.

[ryanflorence]

awesome, thanks :)

[davidtheclark]

Maybe I'm confused as to the status of this ... but I seem to running into exactly the issue raised above, with v0.11.4: The routing works on IE8 only if I manually refresh. Just clicking a link changes the hash in the URL but doesn't have an effect on the rendered page.

I have es5-shim running and in the IE8 dev tools I'm not seeing any console errors when I click a link --- it's just that nothing happens.

Am I missing something about what's needed to implement this with IE8?

[davidtheclark]

Update --- don't know what changed (I'm in early stages of an app so doing a bunch of rewriting), but now it is working! That's good. Must have been something funny going on in my code (might have been that I had a history API polyfill in place because I was also trying out page.js, which required the polyfill (and still didn't work)).