Integrieren Sie den aktiven NavLink des React-Routers in die untergeordnete Komponente

Mein Menü sieht derzeit so aus:

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

Zur Integration mit react-router-domhabe ich wie folgt modifiziert:

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

Meine MenuItemKomponente unterstützt das Styling des derzeit "aktiven" Links wie folgt:

<MenuItem active text="link1" />

Wie integriere ich das "aktive" Routenstyling mit react-router-dom?

Gibt es einen booleschen Wert, den ich wie folgt einstellen kann?

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

Bearbeiten: MenuItem ist eine Komponente von Blueprintjs. Wenn die activeRequisite festgelegt ist, werden möglicherweise einige interne Stilregeln auf die Komponente angewendet. Ich könnte die activeClassNameRequisite verwenden, NavLinkaber ich möchte das CSS einer Komponente eines Drittanbieters nicht replizieren.

Lösung des Problems

Am Ende habe ich es herausgefunden. Ich habe meine eigene Komponente erstellt, indem ich die Zusammensetzung der RouteKomponente verwendet habe

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}
 />
 )}
 />
 );
};