Merge pull request #272 from appirio-tech/feature/connectv2-router-upgrade

Fixed our custom NavLink to work as expected for selected link after react router upgrade

Author: vikasrohit

components/NavLink/NavLink.jsx

@@ -1,5 +1,6 @@
+import _ from 'lodash'
 import React, { PropTypes, Component } from 'react'
-import { NavLink as RNavLink} from 'react-router-dom'
+import { NavLink as RNavLink, matchPath} from 'react-router-dom'
 
 class NavLink extends Component {
   constructor(props) {
@@ -8,8 +9,16 @@ class NavLink extends Component {
 
   render() {
     const { to, content, target } = this.props
+    const { router } = this.context
     let classes = this.props.classes
     const attrs = { to }
+    if (to && router) {
+      const pathname = _.get(router, 'route.location.pathname', '')
+      const active = matchPath(pathname, { path: to }) !== null
+      if (active) {
+        classes += ' selected'
+      }
+    }
     if (target || target !== '_self') {
       attrs.target = target
       if (attrs.target === '_blank') {
@@ -18,17 +27,21 @@ class NavLink extends Component {
     }
     return (
       <li className={classes}>
-        <RNavLink activeClassName="selected" {...attrs}>{content}</RNavLink>
+        <RNavLink activeClassName="active" {...attrs}>{content}</RNavLink>
       </li>
     )
   }
 }
 
+NavLink.contextTypes ={ 
+  router: PropTypes.object
+}
+
 NavLink.propTypes = {
   to: PropTypes.string.isRequired,
   target: PropTypes.string,
   content: PropTypes.string.isRequired,
   classes: PropTypes.string.isRequired
 }
 
-export default NavLink
+export default NavLink