Integrate React router active NavLink with child component

Question

My menu currently looks like this:

<Menu>
    <MenuItem text="link1" />
    <MenuItem text="link2" />
</Menu>

To integrate with react-router-dom, I modified in the following way:

<Menu>

    <NavLink to="link1">
        <MenuItem text="link1" />
    </NavLink>

    <NavLink to="link2">
        <MenuItem text="link2" />
    </NavLink>

</Menu>

My MenuItem Component supports styling of the currently "active" link like so:

<MenuItem active text="link1" />

How do I integrate the "active" route styling with react-router-dom ?

Is there some boolean I can set in the following way?

<MenuItem active={isRouteActive} text="link1" />

Edit: MenuItem is a component from Blueprintjs. When the active prop is set, its possible some internal styling rules are applied to the component. I could use the activeClassName prop on NavLink but I don't want to replicate the css of a 3rd party component.

Answer 1

I ended up figuring it out. I created my own Component using composition of the Route component

const MenuItemExt = ({ icon, text, to, activeOnlyWhenExact }) => {
  return (
    <Route
      path={to}
      exact={activeOnlyWhenExact}
      children={({match, history}) => (
        <MenuItem
          active={match}
          icon={icon}
          onClick={() => {
            history.push(to);
          }}
          text={text}
        />
      )}
    />
  );
};