React Router v4 Einstellung activeClass auf Eltern

Question

Nicht zu vertraut mit Reagieren Router, aber ich brauche die Funktionalität des NavLink, um die aktive Klasse auf das übergeordnete li Element, und nicht das a Element.

Um dies zu implementieren, ich sah sie nur an den Quellcode des NavLink und kopiert sie auf ein neues Element. (Beispiel Typoskript mit, aber nur etwa die gleichen wie js sowieso)

import * as React from 'react'; 
import { Link, withRouter, Route } from 'react-router-dom'; 


class LiNavLink extends React.Component<any, {}> { 
    render() { 
     const {to,exact, strict, activeClassName, className, activeStyle, style, isActive: getIsActive, ...rest } = this.props; 
     return (
      <Route 
       path={typeof to === 'object' ? to.pathname : to} 
       exact={exact} 
       strict={strict} 
       children={({ location, match }) => { 
        const isActive = !!(getIsActive ? getIsActive(match, location) : match) 

        return (
         <li 
          className={isActive ? [activeClassName, className].join(' ') : className} 
          style={isActive ? { ...style, ...activeStyle } : style}> 
          <Link 
           to={to} 
           {...rest} 
          /> 
         </li> 
        ) 
       }} 
      /> 
     ); 
    } 
} 

export default LiNavLink; 

Dann wird die Nutzung:

<ul> 
    <LiNavLink activeClassName='active' exact={true} strict to="/example"><span>Active</span></LiNavLink> 
    <LiNavLink activeClassName='active' exact={true} strict to="/example/archived"><span>Archived</span></LiNavLink> 
</ul> 

Ich bin ein HashRouter mit und aus irgendeinem Grunde, den ich nicht herausfinden kann,, Dies wird nicht aktualisiert, wenn sich die Route ändert, nur wenn ich die Seite "refresh", wird aktualisiert, wie es sein sollte.

Ich glaube, es nie aktualisiert, weil die Requisiten nie ändern? Also weiß es nicht, sich selbst zu aktualisieren?

Wie kann ich dies aktualisieren? Oder ist mein Problem woanders?

Answer 1

Ich habe festgestellt, dass Sie mithilfe von CSS den aktiven Link erweitern können, um das übergeordnete Element <li> zu füllen, indem Sie display:block; in der aktiven Klasse festlegen.

Zum Beispiel, wenn unsere Verbindung ist:

<li> 
    <NavLink to="/overview" className=styles.sideLink activeClassName=styles.sideLinkSelected> 
    Overview 
    </NavLink> 
</li> 

dann unser CSS sei:

&__sideLinkSelected 
{ 
    background-color: blue; 
    display:block; 
}