Disable routing of SPA in IE9

TL;DR: Abstract the static and dynamic routing methods provided by router. Then, differentiate the action based on whether or not the browser support history manipulation.

SPA page with router works well in IE9, which does not support history manipulation API. History cannot be manipulated, but the page works fine.

However, when user uses the refresh or back navigation, problems arise. Since the user’s page movement is not stored in the history stack at all, when refreshing or going back, an incorrect page result is displayed. So i chose to disable the SPA routing if the browser does not support history manipulation.

We judge whether it is supported by the presence or absence of the state attribute of the history object.

export const HAVE_HISTORY_STATE = ‘state’ in window.history;

The principle is to abstract the routing methods provided by the router.

Static routing : If the browser don’t support, use <a> instead of <Link>

Dynamic routing : If the browser don’t support, use window.location.replace or href, instead of route()