Check that params match for link to be active

Author: davarisg

package.json

@@ -34,6 +34,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "deep-equal": "^1.0.1",
     "history": "^4.6.1",
     "hoist-non-react-statics": "^1.2.0",
     "path-to-regexp": "^1.7.0"

src/components/Link/__tests__/testLink.js

@@ -13,16 +13,19 @@ describe('<Link>', () => {
         context = {
             router: {
                 linkMiddleware: [],
-                location: {},
+                location: {
+                    pathname: '/u/x/'
+                },
                 urls: {
                     makeLocation({urlName, params, query}) {
                         expect(urlName).toEqual('user:profile');
                         expect(params).toEqual({username: 'x'});
                         expect(query).toEqual({a: 'b'});
                         return {pathname: "/u/x/", search: '?a=b'};
                     },
-                    match() {
-                        return {};
+                    match(pathname, urlName) {
+                        expect(urlName).toEqual('user:profile');
+                        return {params: {username: pathname.split("/")[2]}};
                     }
                 },
                 navigate,
@@ -74,11 +77,26 @@ describe('<Link>', () => {
     });
 
     it('should have active styles when appropriate', () => {
-        const wrapper = mount(
+        context.router.location.pathname = '/u/a/';
+        let wrapper = mount(
             <Link activeClassName="another" className="testclass" urlName="user:profile" params={{username: 'x'}} query={{a: 'b'}} />,
             {context}
         );
-        const a = wrapper.find('a');
+        let a = wrapper.find('a');
+        expect(a.length).toEqual(1);
+        expect(a.props()).toEqual({
+            children: undefined,
+            href: "/u/x/?a=b",
+            onClick: jasmine.any(Function),
+            className: 'testclass'
+        });
+
+        context.router.location.pathname = '/u/x/';
+        wrapper = mount(
+            <Link activeClassName="another" className="testclass" urlName="user:profile" params={{username: 'x'}} query={{a: 'b'}} />,
+            {context}
+        );
+        a = wrapper.find('a');
         expect(a.length).toEqual(1);
         expect(a.props()).toEqual({
             children: undefined,

src/components/Link/index.js

@@ -1,5 +1,6 @@
 /* @flow */
 import React from 'react';
+import deepEqual from 'deep-equal';
 import withRouter from '../decorators/withRouter';
 import {RouterContextPropType} from '../Router';
 import type Urls from '../../urls';
@@ -83,7 +84,7 @@ class Link extends React.PureComponent {
     };
 
     isActive = () => {
-        const {urls, location, urlName, exact, strict, isActive} = this.props;
+        const {urls, location, urlName, params, exact, strict, isActive} = this.props;
 
         if (!urlName) {
             return false;
@@ -95,6 +96,9 @@ class Link extends React.PureComponent {
             return isActive(match, location);
         }
 
+        if (match && params) {
+            return deepEqual(match.params, params);
+        }
         return !!match;
     };
 

yarn.lock

@@ -1223,6 +1223,10 @@ decamelize@^1.0.0, decamelize@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
+deep-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+
 deep-extend@~0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"