useExact for subNavItems (#412)

useExact for subNavItems

example/src/SiteWrapper.react.js

@@ -27,6 +27,7 @@ type subNavItem = {|
   +to?: string,
   +icon?: string,
   +LinkComponent?: React.ElementType,
+  +useExact?: boolean,
 |};
 
 type navItem = {|

src/components/Dropdown/DropdownItem.react.js

@@ -37,6 +37,10 @@ type Props = {|
    * onClick handler
    */
   +onClick?: (event: SyntheticMouseEvent<*>) => mixed,
+  /**
+   * Whether or not to pass "exact" property to underlying NavLink component
+   */
+  +useExact?: boolean,
 |};
 
 /**
@@ -52,6 +56,7 @@ function DropdownItem({
   to,
   RootComponent,
   onClick,
+  useExact,
 }: Props): React.Node {
   const classes = cn({ "dropdown-item": true }, className);
   const childrenForAll = (
@@ -71,7 +76,7 @@ function DropdownItem({
     </React.Fragment>
   );
   return RootComponent ? (
-    <RootComponent className={classes} to={to} onClick={onClick}>
+    <RootComponent className={classes} to={to} onClick={onClick} exact={useExact}>
       {childrenForAll}
     </RootComponent>
   ) : (

src/components/Nav/Nav.react.js

@@ -13,6 +13,7 @@ export type subNavItem = {|
   +to?: string,
   +icon?: string,
   +LinkComponent?: React.ElementType,
+  +useExact?: boolean,
 |};
 
 type navItem = {|

src/components/Nav/NavItem.react.js

@@ -125,6 +125,7 @@ class NavItem extends React.Component<Props, State> {
                     to={a.to}
                     icon={a.icon}
                     LinkComponent={a.LinkComponent}
+                    useExact={a.useExact}
                   />
                 ))) ||
               children}

src/components/Nav/NavSubItem.react.js

@@ -9,6 +9,7 @@ type Props = {|
   +to?: string,
   +icon?: string,
   +value?: string,
+  +useExact?: boolean,
 |};
 
 function NavSubItem({
@@ -19,9 +20,10 @@ function NavSubItem({
   icon,
   hasSubNav,
   value,
+  useExact,
 }: Props): React.Node {
   return (
-    <Dropdown.Item to={to} icon={icon} RootComponent={LinkComponent}>
+    <Dropdown.Item to={to} icon={icon} RootComponent={LinkComponent} useExact={useExact || false}>
       {value || children}
     </Dropdown.Item>
   );

src/components/Site/SiteNav.react.js

@@ -9,6 +9,7 @@ type subNavItem = {|
   +to?: string,
   +icon?: string,
   +LinkComponent?: React.ElementType,
+  +useExact?: boolean,
 |};
 
 type navItem = {|