Update Navigation mixin

Author: mjackson

modules/Navigation.js

@@ -13,7 +13,7 @@ var { object } = React.PropTypes;
  *     mixins: [ Navigation ],
  *     handleClick(event) {
  *       event.preventDefault();
- *       this.transitionTo('aRoute', { the: 'params' }, { the: 'query' });
+ *       this.transitionTo('/the/path', { the: 'query' });
  *     },
  *     render() {
  *       return (
@@ -31,8 +31,8 @@ var Navigation = {
 };
 
 var RouterNavigationMethods = [
-  'makePath',
-  'makeHref',
+  'createPath',
+  'createHref',
   'transitionTo',
   'replaceWith',
   'go',

modules/NavigationMixin.js

@@ -1,7 +1,31 @@
 import invariant from 'invariant';
+import React from 'react';
+import { stringifyQuery } from './QueryUtils';
+
+var { func } = React.PropTypes;
 
 var NavigationMixin = {
 
+  propTypes: {
+    stringifyQuery: func
+  },
+
+  getDefaultProps() {
+    return {
+      stringifyQuery
+    };
+  },
+
+  createPath(pathname, query) {
+    var { stringifyQuery } = this.props;
+
+    var queryString;
+    if (query == null || (queryString = stringifyQuery(query)) === '')
+      return pathname;
+
+    return pathname + (pathname.indexOf('?') === -1 ? '?' : '&') + queryString;
+  },
+
   /**
    * Returns a string that may safely be used to link to the given
    * pathname and query.

modules/QueryUtils.js

@@ -0,0 +1,9 @@
+import qs from 'qs';
+
+export function stringifyQuery(query) {
+  return qs.stringify(query, { arrayFormat: 'brackets' });
+}
+
+export function parseQueryString(queryString) {
+  return qs.parse(queryString);
+}

modules/Router.js

@@ -2,6 +2,7 @@ import warning from 'warning';
 import invariant from 'invariant';
 import { createClass, createElement, isValidElement, PropTypes } from 'react';
 import { component, components, history, location, routes } from './PropTypes';
+import { parseQueryString } from './QueryUtils';
 import { createRoutes } from './RouteUtils';
 import matchRoutes from './matchRoutes';
 import runTransitionHooks from './runTransitionHooks';
@@ -14,16 +15,6 @@ import ActiveMixin from './ActiveMixin';
 
 var { arrayOf, func, object } = PropTypes;
 
-import qs from 'qs';
-
-function stringifyQuery(query) {
-  return qs.stringify(query, { arrayFormat: 'brackets' });
-}
-
-function parseQueryString(queryString) {
-  return qs.parse(queryString);
-}
-
 var Router = createClass({
 
   mixins: [ NavigationMixin, ScrollManagementMixin, ActiveMixin ],
@@ -69,7 +60,6 @@ var Router = createClass({
   propTypes: {
     createElement: func,
     parseQueryString: func,
-    stringifyQuery: func,
     onError: func,
     onUpdate: func,
     routes,
@@ -86,8 +76,7 @@ var Router = createClass({
   getDefaultProps() {
     return {
       createElement,
-      parseQueryString,
-      stringifyQuery
+      parseQueryString
     };
   },
 
@@ -177,16 +166,6 @@ var Router = createClass({
       this._unlisten();
   },
 
-  createPath(pathname, query) {
-    var { stringifyQuery } = this.props;
-
-    var queryString;
-    if (query == null || (queryString = stringifyQuery(query)) === '')
-      return pathname;
-
-    return pathname + (pathname.indexOf('?') === -1 ? '?' : '&') + queryString;
-  },
-
   createElement(component, props) {
     return component ? this.props.createElement(component, props) : null;
   },

modules/State.js

@@ -15,10 +15,10 @@ var { object } = React.PropTypes;
  *     render() {
  *       var className = this.props.className;
  *
- *       if (this.isActive('about'))
+ *       if (this.isActive('/about'))
  *         className += ' is-active';
  *
- *       return React.createElement('a', { className: className }, this.props.children);
+ *       return React.createElement('a', { className }, this.props.children);
  *     }
  *   });
  */