diff --git a/modules/__tests__/IndexLink-test.js b/modules/__tests__/IndexLink-test.js index 730589d991..1747516ffd 100644 --- a/modules/__tests__/IndexLink-test.js +++ b/modules/__tests__/IndexLink-test.js @@ -8,24 +8,15 @@ import Router from '../Router' import Route from '../Route' import IndexLink from '../IndexLink' -describe('an ', function () { +describe('An ', function () { - var node - beforeEach(function () { - node = document.createElement('div') - }) - - afterEach(function () { - React.unmountComponentAtNode(node) - }) - - var App = React.createClass({ - render () { + const App = React.createClass({ + render() { return (
    -
  • app
  • -
  • deep
  • +
  • app
  • +
  • deep
{this.props.children}
@@ -33,31 +24,40 @@ describe('an ', function () { } }) - var Parent = React.createClass({ - render () { + const Parent = React.createClass({ + render() { return
parent {this.props.children}
} }) - var Child = React.createClass({ - render () { + const Child = React.createClass({ + render() { return
child
} }) - var routes = ( + const routes = ( - + - + ) + let node + beforeEach(function () { + node = document.createElement('div') + }) + + afterEach(function () { + React.unmountComponentAtNode(node) + }) + describe('when linking to the root', function () { - it('is active when the parent’s route is active', function (done) { + it("is active when the parent's route is active", function (done) { React.render(( - + ), node, function () { expect(node.querySelector('#appLink').className).toEqual('active') expect(node.querySelector('#deepLink').className).toEqual('') @@ -67,9 +67,9 @@ describe('an ', function () { }) describe('when linking deep into the route hierarchy', function () { - it('is active when the parent’s route is active', function (done) { + it("is active when the parent's route is active", function (done) { React.render(( - + ), node, function () { expect(node.querySelector('#appLink').className).toEqual('') expect(node.querySelector('#deepLink').className).toEqual('active') diff --git a/modules/isActive.js b/modules/isActive.js index 6fe27ba121..9a369b4ceb 100644 --- a/modules/isActive.js +++ b/modules/isActive.js @@ -1,19 +1,25 @@ import { matchPattern } from './PatternUtils' /** - * Returns true if a route and params that match the given - * pathname are currently active. + * Returns true if the given pathname matches the active pathname. */ -function pathnameIsActive(pathname, activePathname, activeRoutes, activeParams) { - if (pathname === activePathname || activePathname.indexOf(pathname + '/') === 0) - return true +function pathnameIsActive(pathname, activePathname) { + return pathname === activePathname || activePathname.indexOf(pathname + '/') === 0 +} + +function paramsAreActive(paramNames, paramValues, activeParams) { + return paramNames.every(function (paramName, index) { + return String(paramValues[index]) === String(activeParams[paramName]) + }) +} +function getMatchingRoute(pathname, activeRoutes, activeParams) { let route, pattern, basename = '' for (let i = 0, len = activeRoutes.length; i < len; ++i) { route = activeRoutes[i] - if (!route.path) - return false + //if (!route.path) + // return false pattern = route.path || '' @@ -22,16 +28,29 @@ function pathnameIsActive(pathname, activePathname, activeRoutes, activeParams) let { remainingPathname, paramNames, paramValues } = matchPattern(pattern, pathname) - if (remainingPathname === '') { - return paramNames.every(function (paramName, index) { - return String(paramValues[index]) === String(activeParams[paramName]) - }) - } + if (remainingPathname === '' && paramsAreActive(paramNames, paramValues, activeParams)) + return route basename = pattern } - return false + return null +} + +/** + * Returns true if the given pathname matches the active routes + * and params. + */ +function routeIsActive(pathname, activeRoutes, activeParams, indexOnly) { + let route = getMatchingRoute(pathname, activeRoutes, activeParams) + + if (route == null) + return false + + if (indexOnly) + return activeRoutes.length > 1 && activeRoutes[activeRoutes.length - 2].indexRoute === route + + return true } /** @@ -60,11 +79,10 @@ 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])) + if (!pathnameIsActive(pathname, location.pathname) && !routeIsActive(pathname, routes, params, indexOnly)) return false - return pathnameIsActive(pathname, location.pathname, routes, params) && - queryIsActive(query, location.query) + return queryIsActive(query, location.query) } export default isActive