Merge pull request #383 from tabler/navlink-state-fix

fix(NavLink): Fixed navlink active state.

example/src/SiteWrapper.react.js

@@ -36,10 +36,17 @@ type navItem = {|
   +active?: boolean,
   +LinkComponent?: React.ElementType,
   +subItems?: Array<subNavItem>,
+  +useExact?: boolean,
 |};
 
 const navBarItems: Array<navItem> = [
-  { value: "Home", to: "/", icon: "home", LinkComponent: withRouter(NavLink) },
+  {
+    value: "Home",
+    to: "/",
+    icon: "home",
+    LinkComponent: withRouter(NavLink),
+    useExact: true,
+  },
   {
     value: "Interface",
     icon: "box",

src/components/Nav/Nav.react.js

@@ -22,6 +22,7 @@ type navItem = {|
   +active?: boolean,
   +LinkComponent?: React.ElementType,
   +subItems?: Array<subNavItem>,
+  +useExact?: boolean,
 |};
 
 type Props = {|
@@ -123,6 +124,7 @@ class Nav extends React.Component<Props, State> {
                   LinkComponent={a.LinkComponent}
                   subItemsObjects={a.subItems}
                   active={this.computeActive(a.active, a.to, a.subItems)}
+                  useExact={a.useExact}
                 />
               ))) ||
             children}

src/components/Nav/NavItem.react.js

@@ -32,6 +32,10 @@ type Props = {|
    * Position of the subnav Dropdown
    */
   +position?: Placement,
+  /**
+   * Whether or not to pass "exact" property to underlying NavLink component
+   */
+  +useExact?: boolean,
 |};
 
 type State = {
@@ -68,6 +72,7 @@ class NavItem extends React.Component<Props, State> {
       active,
       subItems,
       subItemsObjects,
+      useExact,
       position = "bottom-start",
     }: Props = this.props;
 
@@ -85,6 +90,7 @@ class NavItem extends React.Component<Props, State> {
               hasSubNav={hasSubNav}
               active={active}
               rootRef={ref}
+              useExact={useExact}
             >
               {!hasSubNav && typeof children === "string" ? children : value}
             </Nav.Link>
@@ -98,6 +104,7 @@ class NavItem extends React.Component<Props, State> {
           RootComponent={LinkComponent}
           hasSubNav={hasSubNav}
           active={active}
+          useExact={useExact}
         >
           {!hasSubNav && typeof children === "string" ? children : value}
         </Nav.Link>

src/components/Nav/NavLink.react.js

@@ -12,6 +12,7 @@ type Props = {|
   +to?: string,
   +hasSubNav?: boolean,
   +rootRef?: (?HTMLElement) => void,
+  +useExact?: boolean,
 |};
 
 function NavLink({
@@ -23,6 +24,7 @@ function NavLink({
   to,
   hasSubNav,
   rootRef,
+  useExact,
 }: Props): React.Node {
   const classes = cn({ "nav-link": true, active: active }, className);
 
@@ -36,9 +38,8 @@ function NavLink({
       {children}
     </React.Fragment>
   );
-
   return RootComponent ? (
-    <RootComponent className={classes} to={to}>
+    <RootComponent exact={useExact || false} className={classes} to={to}>
       {childrenForAll}
     </RootComponent>
   ) : (

src/components/Site/SiteNav.react.js

@@ -18,6 +18,7 @@ type navItem = {|
   +active?: boolean,
   +LinkComponent?: React.ElementType,
   +subItems?: Array<subNavItem>,
+  +useExact?: boolean,
 |};
 
 type navItems = Array<navItem>;