React Router v4でactiveClassを親に設定する

Question

反応ルータにはあまり慣れていませんが、ではなく、liの親要素でアクティブクラスを設定するためにNavLinkの機能が必要です。

これを実装するには、NavLinkのソースコードを見て、それを新しい要素にコピーしました。 （例はとにかく、ちょうど同じJSなどについてtypescriptですを使用して）

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; 

次に使用：

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

私は把握することはできません何らかの理由でHashRouterとを使用しています、ルートが変更されたときに更新されません。ページをハードにリフレッシュしたときにのみ更新されます。

小道具が決して変更されないので、私はそれが更新されないと思いますか？それで、それ自体を更新することを知らないのですか？

どうすれば更新できますか？それとも私の問題は別の場所ですか？

Answer 1

アクティブなクラスにdisplay:block;を設定することで、CSSを使用して、アクティブなリンクを親の<li>要素を埋めるように拡張することができます。私たちのリンクであった場合例えば

は：

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

その後、私たちのCSSは次のようになります。

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