make route checking on pageload configurable

YahooArchive · Dec 4, 2014 · 5daefad · 5daefad
1 parent f05703a
commit 5daefad
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -88,6 +88,8 @@ Using hash-based url for client side routing has a lot of known issues.  [Histor
 
 But as always, there will be some applications out there that have to use it.  This implementation provides a solution.
 
+If you do decide to use hash route, it is recommended to enable `checkRouteOnPageLoad`.  Because hash fragment (that contains route) does not get sent to the server side, `RouterMixin` will compare the route info from server and route in the hash fragment.  On route mismatch, it will dispatch a navigate action on browser side to load the actual page content for the route represented by the hash fragment.
+
 #### useHashRoute Config
 You can decide when to use hash-based routing through the `useHashRoute` option:
 

diff --git a/lib/RouterMixin.js b/lib/RouterMixin.js
@@ -23,17 +23,28 @@ RouterMixin = {
         var self = this,
             context = self.props.context,
             pathFromHistory,
-            pathFromState = self.state && self.state.route && self.state.route.path;
+            pathFromState;
 
         self._history = ('function' === typeof self.props.historyCreator) ? self.props.historyCreator() : new History();
-        pathFromHistory = self._history.getPath();
 
-        if (context && (pathFromHistory !== pathFromState)) {
-            // put it in setImmediate, because we need the base component to have
-            // store listeners attached, before navigateAction is executed.
-            setImmediate(function navigateToActualRoute() {
-                context.executeAction(navigateAction, {type: EVT_PAGELOAD, path: pathFromHistory});
-            });
+        if (self.props.checkRouteOnPageLoad) {
+            // You probably want to enable checkRouteOnPageLoad, if you use a history implementation
+            // that supports hash route:
+            //   At page load, for browsers without pushState AND hash is present in the url,
+            //   since hash fragment is not sent to the server side, we need to
+            //   dispatch navigate action on browser side to load the actual page content
+            //   for the route represented by the hash fragment.
+
+            pathFromHistory = self._history.getPath();
+            pathFromState = self.state && self.state.route && self.state.route.path;
+
+            if (context && (pathFromHistory !== pathFromState)) {
+                // put it in setImmediate, because we need the base component to have
+                // store listeners attached, before navigateAction is executed.
+                setImmediate(function navigateToActualRoute() {
+                    context.executeAction(navigateAction, {type: EVT_PAGELOAD, path: pathFromHistory});
+                });
+            }
         }
 
         self._historyListener = function (e) {

diff --git a/tests/unit/lib/RouterMixin-test.js b/tests/unit/lib/RouterMixin-test.js
@@ -69,7 +69,7 @@ describe ('RouterMixin', function () {
             expect(testResult.dispatch.payload.params).to.eql({a: 1});
         });
         it ('dispatch navigate event for pages that path does not match', function (done) {
-            routerMixin.props = {context: contextMock, historyCreator: function() { return historyMock(); }};
+            routerMixin.props = {context: contextMock, checkRouteOnPageLoad: true, historyCreator: function() { return historyMock(); }};
             var origPushState = window.history.pushState;
             routerMixin.state = {
                 route: {