[added] IndexLink

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) {