Parse querystrings, if passed. Fixes #149.

Author: STRML

lib/RouteRenderingMixin.js

@@ -11,6 +11,9 @@ var assign = Object.assign || require('object.assign');
 var RouteRenderingMixin = {
 
   renderRouteHandler: function(props) {
+    if (!this.state.match.route) {
+      throw new Error("React-router-component: No route matched! Did you define a NotFound route?");
+    }
     var handler = this.state.handler;
     props = assign({ref: this.state.match.route.ref}, props);
     // If we were passed an element, we need to clone it before passing it along.

lib/matchRoutes.js

@@ -5,6 +5,7 @@ var invariant = require('react/lib/invariant');
 var React = require('react');
 var cloneWithProps = require('react/lib/cloneWithProps');
 var assign = Object.assign || require('object.assign');
+var qs = require('qs');
 
 var patternCache = {};
 
@@ -17,12 +18,19 @@ var patternCache = {};
 function matchRoutes(routes, path) {
   var createCompiler = require('../index').createURLPatternCompiler;
 
-  var match, page, notFound;
+  var match, page, notFound, queryObj;
 
   if (!Array.isArray(routes)) {
     routes = [routes];
   }
 
+  path = path.split('?');
+  var pathToMatch = path[0];
+  var queryString = path[1];
+  if (queryString) {
+    queryObj = qs.parse(queryString);
+  }
+
   for (var i = 0, len = routes.length; i < len; i++) {
     var current = routes[i];
     // Simply skip null or undefined to allow ternaries in route definitions
@@ -40,7 +48,7 @@ function matchRoutes(routes, path) {
       var pattern = patternCache[current.props.path] ||
                     new URLPattern(current.props.path, createCompiler(current.props));
       if (!page) {
-        match = pattern.match(path);
+        match = pattern.match(pathToMatch);
         if (match) {
           page = current;
         }
@@ -53,6 +61,7 @@ function matchRoutes(routes, path) {
         if (match && match._ && !Array.isArray(match._)) {
           match._ = [match._];
         }
+
       }
     }
     if (!notFound && current.props.path === null) {
@@ -61,9 +70,10 @@ function matchRoutes(routes, path) {
   }
 
   return new Match(
-    path,
+    pathToMatch,
     page ? page : notFound ? notFound : null,
-    match
+    match,
+    queryObj
   );
 }
 
@@ -89,10 +99,11 @@ function parseMatch(current, match) {
  *
  * @private
  */
-function Match(path, route, match) {
+function Match(path, route, match, query) {
   this.path = path;
   this.route = route;
   this.match = match;
+  this.query = query;
 
   this.unmatchedPath = this.match && this.match._ ?
     this.match._[0] :
@@ -107,9 +118,14 @@ Match.prototype.getHandler = function() {
   if (!this.route) return undefined;
 
   var props = assign({}, this.route.props, this.match);
+  // Querystring is assigned as _query.
+  props._query = this.query || {};
+
+  // Delete props that shouldn't be passed to the handler.
   delete props.pattern;
   delete props.path;
   delete props.handler;
+
   var handler = this.route.props.handler;
   // Passed an element - clone it with the props from the route
   if (React.isValidElement(handler)) {

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "envify": "^3.4.0",
     "object.assign": "^3.0.0",
+    "qs": "^4.0.0",
     "url-pattern": "~0.9.0",
     "urllite": "~0.5.0"
   },

tests/browser.js

@@ -26,7 +26,9 @@ var a = React.createFactory('a');
 function divProps(children, prop) {
   return React.createClass({
     render: function() {
-      return div(children, this.props[prop]);
+      var propVal = this.props[prop];
+      if (typeof propVal === 'object') propVal = JSON.stringify(propVal);
+      return div(children, propVal);
     }
   });
 }
@@ -110,6 +112,10 @@ describe('Routing', function() {
             path: '/__zuul/transient',
             handler: div(null, 'i\'m transient')
           }),
+          Location({
+            path: '/__zuul/query',
+            handler: divProps(null, '_query')
+          }),
           Location({
             path: '/__zuul/:slug',
             handler: divProps(null, 'slug')
@@ -173,6 +179,15 @@ describe('Routing', function() {
       });
     });
 
+    it('navigates with a querystring and parses it', function(done) {
+      assertRendered('mainpage');
+      router.navigate('/__zuul/query?foo=bar&baz=biff&num=1');
+      delay(function() {
+        assertRendered(JSON.stringify({foo: 'bar', baz: 'biff', num: "1"}));
+        done();
+      });
+    });
+
     it('handles "popstate" event', function(done) {
       assertRendered('mainpage');
       router.navigate('/__zuul/hello', function() {

tests/matchRoutes.js

@@ -150,6 +150,17 @@ describe('matchRoutes', function() {
     assert.strictEqual(match.unmatchedPath, null);
   });
 
+  it('matches query strings', function() {
+    var match = matchRoutes(routes, '/cat/hello?foo=bar&baz=biff');
+    assert(match.route);
+    assert.strictEqual(match.route.props.handler.props.name, 'cat');
+    assert.deepEqual(match.match, {id: 'hello'});
+    assert.strictEqual(match.path, '/cat/hello');
+    assert.strictEqual(match.matchedPath, '/cat/hello');
+    assert.strictEqual(match.unmatchedPath, null);
+    assert.deepEqual(match.query, {foo : 'bar', baz: 'biff'});
+  });
+
   it('handles not found', function() {
     var match = matchRoutes(routes, '/hm');
     assert(match.route);