は私が<strong><em>アンカー</em></strong><em>リンク私のアプリで</em>を得たルータv4のアクティブアンカーリンク

Question

を反応します。 anchor linkがアクティブな場合、アクティブなスタイルの作業を行うにはどうすればいいですか？現在のアクティブなリンクをスタイリング

<NavLink 
    to="/#somewhere" 
    activeClassName="selected" 
>AnchorLink</NavLink> 

Answer 1

あなたは、パラメータactiveClassNameで提供されたクラスにスタイルを与えることができますが、それはハッシュのURLでは動作しませんが、アクティブクラスの私たちは、ハッシュ名でlocation.hashを比較することができます。

例：

<li> 
      <Link className={location.hash == "#about" ? "active" : ""} to='#about'> 
      About 
     </Link> 
     </li> 
     <li> 
      <Link className={location.hash == "#user" ? "active" : ""} to='#user'> 
      User 
     </Link> 
     </li> 
     <li> 
      <Link className={location.hash == "#repo" ? "active" : ""} to='#repo'> 
      Repository 
     </Link> 
</li> 

したがって、この例のために私たちが提供したスタイル

.active { 
    font-weight: bold; 
} 

ので、フォントが唯一の現在アクティブなリンクのために大胆になります。