diff --git a/lib/RouteRenderingMixin.js b/lib/RouteRenderingMixin.js index 7880b0e..7e50178 100644 --- a/lib/RouteRenderingMixin.js +++ b/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)) { diff --git a/lib/RouterMixin.js b/lib/RouterMixin.js index 84aa10d..a08aebe 100644 --- a/lib/RouterMixin.js +++ b/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, '/'); } diff --git a/package.json b/package.json index 87da13b..d5aa256 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index a52a385..de871d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4032,6 +4032,11 @@ media-typer@0.3.0: 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== + merge-descriptors@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-0.0.1.tgz#2ff0980c924cf81d0b5d1fb601177cb8bb56c0d0"