wip(cwrp): deprecate crwp.

lib/RouteRenderingMixin.js

@@ -26,17 +26,18 @@ var RouteRenderingMixin = {
   },
 
   renderRouteHandler: function() {
-    if (!this.state.match.route) {
+    var match = this.getMatch();
+    if (!match.route) {
       throw new Error("React-router-component: No route matched! Did you define a NotFound route?");
     }
-    var handler = this.state.handler;
+    var handler = match.getHandler();
     var isDOMElement = typeof handler.type === 'string';
 
     // If this is a DOM element, don't send these props. This won't prevent all
     // warnings in 15.2.0, but it will catch a lot of them.
-    var matchProps = isDOMElement ? null : this.state.matchProps;
+    var matchProps = isDOMElement ? null : this.getMatchProps();
 
-    var outProps = assign({ref: this.state.match.route.ref}, this.getChildProps(), matchProps);
+    var outProps = assign({ref: match.route.ref}, this.getChildProps(), matchProps);
 
     // If we were passed an element, we need to clone it before passing it along.
     if (React.isValidElement(handler)) {

lib/RouterMixin.js

@@ -7,6 +7,7 @@ var assign        = Object.assign || require('object-assign');
 var matchRoutes   = require('./matchRoutes');
 var Environment   = require('./environment');
 var shallowEqual  = require('is-equal-shallow');
+var memoizeOne    = require('memoize-one');
 
 var RouterMixin = {
   mixins: [Environment.Mixin],
@@ -42,65 +43,9 @@ var RouterMixin = {
   },
 
   getInitialState: function() {
-    return this.getRouterState(this.props);
-  },
-
-  componentWillReceiveProps: function(nextProps) {
-    if (!shallowEqual(nextProps, this.props)) {
-      var nextState = this.getRouterState(nextProps);
-      this.delegateSetRoutingState(nextState);
-    }
-  },
-
-  getRouterState: function(props) {
-    var path;
-    var prefix;
-    var query;
-
-    var parent = props.contextual && this.getParentRouter();
-
-    if (parent) {
-      // Build our new path based off the parent. A navigation may be in progress, in which case
-      // we as well want the newest data so we use the pending match.
-      var parentMatch = parent._pendingMatch || parent.getMatch();
-
-      invariant(
-        props.path ||
-        isString(parentMatch.unmatchedPath) ||
-        parentMatch.matchedPath === parentMatch.path,
-        "contextual router has nothing to match on: %s", parentMatch.unmatchedPath
-      );
-
-      path = props.path || parentMatch.unmatchedPath || '/';
-      prefix = parent.state.prefix + parentMatch.matchedPath;
-      query = parentMatch.query;
-    } else {
-
-      path = props.path || this.getEnvironment().getPath();
-
-      invariant(
-        isString(path),
-        ("router operate in environment which cannot provide path, " +
-         "pass it a path prop; or probably you want to make it contextual")
-      );
-
-      prefix = '';
-    }
-
-    if (path[0] !== '/') {
-      path = '/' + path;
-    }
-
-    var match = matchRoutes(this.getRoutes(props), path, query, this.getURLPatternOptions());
-
-    return {
-      match: match,
-      matchProps: match.getProps(),
-      handler: match.getHandler(),
-      prefix: prefix,
-      navigation: {},
-      path: path
-    };
+    this.getRouterState = memoizeOne(getRouterState.bind(this), shallowEqual);
+    // This component no longer has state
+    return null;
   },
 
   getEnvironment: function() {
@@ -134,7 +79,15 @@ var RouterMixin = {
    * Return current match.
    */
   getMatch: function() {
-    return this.state.match;
+    return this.getRouterState(this.props).match;
+  },
+
+  getMatchProps: function() {
+    return this.getRouterState(this.props).matchProps;
+  },
+
+  getPrefix: function() {
+    return this.getRouterState(this.props).prefix;
   },
 
   getURLPatternOptions: function() {
@@ -151,7 +104,7 @@ var RouterMixin = {
    * Make href scoped for the current router.
    */
   makeHref: function(href) {
-    return join(this.state.prefix, href);
+    return join(this.getPrefix(), href);
   },
 
   /**
@@ -162,8 +115,7 @@ var RouterMixin = {
    * @param {Callback} cb
    */
   navigate: function(path, navigation, cb) {
-    path = join(this.state.prefix, path);
-    this.getEnvironment().setPath(path, navigation, cb);
+    this.getEnvironment().setPath(this.makeHref(path), navigation, cb);
   },
 
   /**
@@ -203,7 +155,7 @@ var RouterMixin = {
    * Return the current path
    */
   getPath: function () {
-    return this.state.match.path;
+    return this.getMatch().path;
   },
 
   /**
@@ -223,6 +175,58 @@ var RouterMixin = {
 
 };
 
+// To be bound to the component
+function getRouterState(props) {
+  var path;
+  var prefix;
+  var query;
+
+  var parent = props.contextual && this.getParentRouter();
+
+  if (parent) {
+    // Build our new path based off the parent. A navigation may be in progress, in which case
+    // we as well want the newest data so we use the pending match.
+    var parentMatch = parent._pendingMatch || parent.getMatch();
+
+    invariant(
+      props.path ||
+      isString(parentMatch.unmatchedPath) ||
+      parentMatch.matchedPath === parentMatch.path,
+      "contextual router has nothing to match on: %s", parentMatch.unmatchedPath
+    );
+
+    path = props.path || parentMatch.unmatchedPath || '/';
+    prefix = parent.getPrefix() + parentMatch.matchedPath;
+    query = parentMatch.query;
+  } else {
+
+    path = props.path || this.getEnvironment().getPath();
+
+    invariant(
+      isString(path),
+      ("router operate in environment which cannot provide path, " +
+       "pass it a path prop; or probably you want to make it contextual")
+    );
+
+    prefix = '';
+  }
+
+  if (path[0] !== '/') {
+    path = '/' + path;
+  }
+
+  var match = matchRoutes(this.getRoutes(props), path, query, this.getURLPatternOptions());
+
+  return {
+    match: match,
+    matchProps: match.getProps(),
+    handler: match.getHandler(),
+    prefix: prefix,
+    navigation: {},
+    path: path
+  };
+}
+
 function join(a, b) {
   return (a + '/' + b).replace(/\/+/g, '/');
 }

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "create-react-class": "15.x",
     "is-equal-shallow": "^0.1.3",
+    "memoize-one": "^5.1.1",
     "object-assign": "^4.1.0",
     "object.omit": "^3.0.0",
     "prop-types": "15.x",

yarn.lock

@@ -4032,6 +4032,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
+memoize-one@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+
 [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-0.0.1.tgz#2ff0980c924cf81d0b5d1fb601177cb8bb56c0d0"