React Router v4 ayarı activeClass on parent

Question

Reaktif yönlendiriciye fazla aşina değil, ancak ActiveLink li öğesinde etkin sınıfı ayarlamak için NavLink işlevine ihtiyacım var, a öğesinden değil.

Bunu uygulamak için sadece NavLink kaynak koduna baktım ve yeni bir öğeye kopyaladım. (Örnek zaten, ama sadece aynı js olarak yaklaşık typescript kullanarak)

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; 

Sonra kullanımı:

<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> 

ben çözemiyorum nedense bir HashRouter ve kullanıyorum Bu, rota değiştiğinde güncellenmez, yalnızca sayfayı 'zor' hale getirdiğimde, nasıl yapması gerektiğini günceller.

Hiçbir zaman güncellenmediğine inanıyorum çünkü sahne asla değişmez mi? Yani kendini güncellemeyi bilmiyor mu?

Bunu güncellemek için nasıl alabilirim? Yoksa benim problemim başka bir yer mi?

Answer 1

CSS kullanarak etkin bağlantıyı öğesinin aktif sınıfta display:block; ayarlayarak genişletmek için etkin bağlantıyı genişletebileceğini buldum. Örneğin

bizim bağlantı olsaydı:

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

sonra bizim CSS olacaktır:

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