Calculate router state with updated props, fixes #10

Author: andreypopp

docs/recipes/custom-router.md

@@ -21,7 +21,7 @@ We are going to implement custom router as a mixin:
     var MyRouterMixin = {
       mixins: [Router.RouterMixin, Router.AsyncRouteRenderingMixin],
 
-      getRoutes: function() {
+      getRoutes: function(props) {
         var routes = []
         for (var path in this.routes)
           routes.push({path: path, handler: this.routes[path]})

lib/Router.js

@@ -18,8 +18,8 @@ function createRouter(name, component) {
 
     displayName: name,
 
-    getRoutes: function() {
-      return this.props.children;
+    getRoutes: function(props) {
+      return props.children;
     },
 
     getDefaultProps: function() {

lib/RouterMixin.js

@@ -36,23 +36,32 @@ var RouterMixin = {
   },
 
   getInitialState: function() {
+    return this.getRouterState(this.props);
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    var nextState = this.getRouterState(nextProps);
+    this.replaceState(nextState);
+  },
+
+  getRouterState: function(props) {
     var path;
     var prefix;
 
-    if (this.props.contextual && this.context.router) {
+    if (props.contextual && this.context.router) {
 
       var match = this.context.router.getMatch();
 
       invariant(
-        this.props.path || isString(match.unmatchedPath),
+        props.path || isString(match.unmatchedPath),
         "contextual router has nothing to match on: %s", match.unmatchedPath
       );
 
-      path = this.props.path || match.unmatchedPath;
+      path = props.path || match.unmatchedPath;
       prefix = match.matchedPath;
     } else {
 
-      path = this.props.path || this.props.environment.getPath();
+      path = props.path || props.environment.getPath();
 
       invariant(
         isString(path),
@@ -68,16 +77,12 @@ var RouterMixin = {
     }
 
     return {
-      match: matchRoutes(this.getRoutes(), path),
+      match: matchRoutes(this.getRoutes(props), path),
       prefix: prefix,
       navigation: {}
     };
   },
 
-  componentWillReceiveProps: function() {
-    this.replaceState(this.getInitialState());
-  },
-
   /**
    * Return parent router or undefined.
    */
@@ -126,7 +131,7 @@ var RouterMixin = {
    */
   setPath: function(path, navigation, cb) {
     this.replaceState({
-      match: matchRoutes(this.getRoutes(), path),
+      match: matchRoutes(this.getRoutes(this.props), path),
       prefix: this.state.prefix,
       navigation: navigation
     }, cb);