Pass arbitrary navigation params to router

Link components and other navigators can now pass to routers arbitrary params by
using navigate(path, params, cb) method. On popstate/hashchange event those
params are now {isPopState: true} so router could differentiate between
different types of navigation.

Author: andreypopp

lib/AsyncRouteRenderingMixin.js

@@ -29,6 +29,7 @@ var AsyncRouteRenderingMixin = {
           this.replaceState({
             match: this.state.match,
             prefix: this.state.prefix,
+            navigation: this.state.navigation,
             pendingChildren: handler
           });
 

lib/Environment.js

@@ -22,9 +22,10 @@ function Environment() {
 /**
  * Notify routers about the change.
  *
+ * @param {Object} navigation
  * @param {Function} cb
  */
-Environment.prototype.notify = function notify(cb) {
+Environment.prototype.notify = function notify(navigation, cb) {
   var latch = this.routers.length;
 
   if (latch === 0) {
@@ -40,17 +41,21 @@ Environment.prototype.notify = function notify(cb) {
 
   ReactUpdates.batchedUpdates(function() {
     for (var i = 0, len = this.routers.length; i < len; i++) {
-      this.routers[i].setPath(this.path, callback);
+      this.routers[i].setPath(this.path, navigation, callback);
     }
   }.bind(this));
 }
 
-Environment.prototype.makeHref = function navigate(path) {
+Environment.prototype.makeHref = function makeHref(path) {
   return path;
 }
 
-Environment.prototype.navigate = function navigate(path, cb) {
-  return this.setPath(path, cb);
+Environment.prototype.navigate = function navigate(path, navigation, cb) {
+  if (typeof navigation === 'function' && cb === undefined) {
+    cb = navigation;
+    navigation = {};
+  }
+  return this.setPath(path, navigation, cb);
 }
 
 /**
@@ -91,12 +96,12 @@ PathnameEnvironment.prototype.getPath = function() {
   return window.location.pathname;
 }
 
-PathnameEnvironment.prototype.setPath = function(path, cb, retrospective) {
-  if (!retrospective) {
+PathnameEnvironment.prototype.setPath = function(path, navigation, cb) {
+  if (!navigation.isPopState) {
     window.history.pushState({}, '', path);
   }
   this.path = path;
-  this.notify(cb);
+  this.notify(navigation, cb);
 };
 
 PathnameEnvironment.prototype.start = function() {
@@ -111,7 +116,7 @@ PathnameEnvironment.prototype.onPopState = function(e) {
   var path = window.location.pathname;
 
   if (this.path !== path) {
-    this.setPath(path, undefined, true);
+    this.setPath(path, {isPopState: true});
   }
 };
 
@@ -129,12 +134,12 @@ HashEnvironment.prototype.getPath = function() {
   return window.location.hash.slice(1) || '/';
 };
 
-HashEnvironment.prototype.setPath = function(path, cb, retrospective) {
-  if (!retrospective) {
+HashEnvironment.prototype.setPath = function(path, navigation, cb) {
+  if (!navigation.isPopState) {
     window.location.hash = path;
   }
   this.path = path;
-  this.notify(cb);
+  this.notify(navigation, cb);
 };
 
 HashEnvironment.prototype.start = function() {
@@ -149,7 +154,7 @@ HashEnvironment.prototype.onHashChange = function() {
   var path = window.location.hash.slice(1);
 
   if (this.path !== path) {
-    this.setPath(path, undefined, true);
+    this.setPath(path, {isPopState: true});
   }
 };
 

lib/Link.js

@@ -34,6 +34,16 @@ var Link = React.createClass({
     }
   },
 
+  _navigationParams: function() {
+    var params = {};
+    for (var k in this.props) {
+      if (!this.constructor.propTypes[k]) {
+        params[k] = this.props[k];
+      }
+    }
+    return params;
+  },
+
   _createHref: function() {
     return this.props.global ?
       Environment.defaultEnvironment.makeHref(this.props.href) :
@@ -49,7 +59,7 @@ var Link = React.createClass({
       return Environment.defaultEnvironment.navigate(path, cb);
     }
 
-    return this.navigate(path, cb);
+    return this.navigate(path, this._navigationParams(), cb);
   },
 
   render: function() {

lib/RouterMixin.js

@@ -69,7 +69,8 @@ var RouterMixin = {
 
     return {
       match: matchRoutes(this.getRoutes(), path),
-      prefix: prefix
+      prefix: prefix,
+      navigation: {}
     };
   },
 
@@ -104,9 +105,13 @@ var RouterMixin = {
    * @param {String} path
    * @param {Callback} cb
    */
-  navigate: function(path, cb) {
+  navigate: function(path, navigation, cb) {
+    if (typeof navigation === 'function' && cb === undefined) {
+      cb = navigation;
+      navigation = {};
+    }
     path = join(this.state.prefix, path);
-    this.props.environment.setPath(path, cb);
+    this.props.environment.setPath(path, navigation, cb);
   },
 
   /**
@@ -119,10 +124,11 @@ var RouterMixin = {
    * @param {String} path
    * @param {Callback} cb
    */
-  setPath: function(path, cb) {
+  setPath: function(path, navigation, cb) {
     this.replaceState({
       match: matchRoutes(this.getRoutes(), path),
       prefix: this.state.prefix,
+      navigation: navigation
     }, cb);
   },