[added] IndexLink

Author: mjackson

modules/IndexLink.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { component } from './PropTypes';
+import Link from './Link';
+
+var IndexLink = React.createClass({
+ 
+  render() {
+    return <Link {...this.props} onlyActiveOnIndex={true} />
+  }
+
+});
+
+export default IndexLink;

modules/Link.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import warning from 'warning';
 
-var { object, string, func } = React.PropTypes;
+var { bool, object, string, func } = React.PropTypes;
 
 function isLeftClickEvent(event) {
   return event.button === 0;
@@ -38,6 +38,7 @@ var Link = React.createClass({
   propTypes: {
     activeStyle: object,
     activeClassName: string,
+    onlyActiveOnIndex: bool.isRequired,
     to: string.isRequired,
     query: object,
     state: object,
@@ -48,6 +49,7 @@ var Link = React.createClass({
     return {
       className: '',
       activeClassName: 'active',
+      onlyActiveOnIndex: false,
       style: {}
     };
   },
@@ -81,7 +83,7 @@ var Link = React.createClass({
   },
 
   render() {
-    var { to, query } = this.props;
+    var { to, query, onlyActiveOnIndex } = this.props;
 
     var props = {
       ...this.props,
@@ -95,7 +97,7 @@ var Link = React.createClass({
     if (history) {
       props.href = history.createHref(to, query);
 
-      if (history.isActive(to, query)) {
+      if (history.isActive(to, query, onlyActiveOnIndex)) {
         if (props.activeClassName)
           props.className += props.className !== '' ? ` ${props.activeClassName}` : props.activeClassName;
 

modules/State.js

@@ -28,8 +28,8 @@ var State = {
     history: object.isRequired
   },
 
-  isActive(pathname, query) {
-    return this.context.history.isActive(pathname, query);
+  isActive(pathname, query, indexOnly) {
+    return this.context.history.isActive(pathname, query, indexOnly);
   }
 
 };

modules/__tests__/isActive-test.js

@@ -1,6 +1,7 @@
 import expect from 'expect';
 import React from 'react';
 import createHistory from 'history/lib/createMemoryHistory';
+import IndexRoute from '../IndexRoute';
 import Router from '../Router';
 import Route from '../Route';
 
@@ -67,6 +68,7 @@ describe('isActive', function () {
           </Router>
         ), node, function () {
           expect(this.history.isActive('/home')).toBe(true);
+          expect(this.history.isActive('/home', null, true)).toBe(false);
           done();
         });
       });
@@ -82,6 +84,7 @@ describe('isActive', function () {
           </Router>
         ), node, function () {
           expect(this.history.isActive('/home', { the: 'query' })).toBe(true);
+          expect(this.history.isActive('/home', { the: 'query' }, true)).toBe(false);
           done();
         });
       });
@@ -97,6 +100,57 @@ describe('isActive', function () {
           </Router>
         ), node, function () {
           expect(this.history.isActive('/home', { something: 'else' })).toBe(false);
+          expect(this.history.isActive('/home', { something: 'else' }, true)).toBe(false);
+          done();
+        });
+      });
+    });
+  });
+
+  describe('a pathname that matches an index URL', function () {
+    describe('with no query', function () {
+      it('is active', function (done) {
+        React.render((
+          <Router history={createHistory('/home')}>
+            <Route path="/home">
+              <IndexRoute />
+            </Route>
+          </Router>
+        ), node, function () {
+          expect(this.history.isActive('/home', null)).toBe(true);
+          expect(this.history.isActive('/home', null, true)).toBe(true);
+          done();
+        });
+      });
+    });
+
+    describe('with a query that also matches', function () {
+      it('is active', function (done) {
+        React.render((
+          <Router history={createHistory('/home?the=query')}>
+            <Route path="/home">
+              <IndexRoute />
+            </Route>
+          </Router>
+        ), node, function () {
+          expect(this.history.isActive('/home', { the: 'query' })).toBe(true);
+          expect(this.history.isActive('/home', { the: 'query' }, true)).toBe(true);
+          done();
+        });
+      });
+    });
+
+    describe('with a query that does not match', function () {
+      it('is not active', function (done) {
+        React.render((
+          <Router history={createHistory('/home?the=query')}>
+            <Route path="/home">
+              <IndexRoute />
+            </Route>
+          </Router>
+        ), node, function () {
+          expect(this.history.isActive('/home', { something: 'else' })).toBe(false);
+          expect(this.history.isActive('/home', { something: 'else' }, true)).toBe(false);
           done();
         });
       });

modules/isActive.js

@@ -53,10 +53,13 @@ function queryIsActive(query, activeQuery) {
  * Returns true if a <Link> to the given pathname/query combination is
  * currently active.
  */
-function isActive(pathname, query, location, routes, params) {
+function isActive(pathname, query, indexOnly, location, routes, params) {
   if (location == null)
     return false;
 
+  if (indexOnly && (routes.length < 2 || routes[routes.length - 2].indexRoute !== routes[routes.length - 1]))
+    return false;
+
   return pathnameIsActive(pathname, location.pathname, routes, params) &&
     queryIsActive(query, location.query);
 }

modules/useRoutes.js

@@ -19,10 +19,10 @@ function useRoutes(createHistory) {
   return function (options={}) {
     var { routes, ...historyOptions } = options;
     var history = useQueries(createHistory)(historyOptions);
-    var state;
+    var state = {};
 
-    function isActive(pathname, query) {
-      return _isActive(pathname, query, state.location, state.routes, state.params);
+    function isActive(pathname, query, indexOnly=false) {
+      return _isActive(pathname, query, indexOnly, state.location, state.routes, state.params);
     }
 
     function matchRoutesWithWarning(routes, location, callback) {