ReactJsは - どのように私は、現在使用されているページに応じて、ナビゲーションバーのボタンに「アクティブ」クラスを追加することができますか？

ビシャビシャ押しつぶす：

私は反応するように、新たなんだ、私はまだかなりこれについて移動する方法を把握することができない数多くのYouTubeのチュートリアルに従った後、私はそれが「使用することを含むと思わ状態を」しかし、すべての試みは、これまでに失敗しました。私は私の髪を引っ張っています！

これまでのところ、私のナビゲーションバーが完全に動作し、ボタンをクリックすると、他のページにも問題をあなたを負いません。

しかし、私はそのあなたがボタンを強調するか、太字か何かすることにより、上で現在どのページを示すの機能が不足してだと思います。

ただ、このついて行くだろうかみんな不思議？私は、これは私がやって失敗してるという単純な概念であると感じています。

ここでナビゲーションバーは、次のとおりです。

function NavBar() {

  {/* Variable to store the name which page has just been clicked, which by default is the home page */}
  const isActive = "home";


  return (    
    <nav className="landing-page__nav-bar nav-bar">
    <ul className="nav-bar__list">
    {/* Button to Home Page */}
      <Link to ='/'><li><a data-page="home" className="home-link">
        <button href="landingpage" className={` ${isActive === "home" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("home")}>Home</button>
        </a></li>
      </Link>
    {/* Button to Portfolio Page */}
      <Link to ='/portfolio'><li><a data-page="portfolio" className="portfolio-link">
        <button className={` ${isActive === "portfolio" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("portfolio")}>Portfolio</button>
        </a></li>
        </Link>
    {/* Button to Artwork Page */}
      <Link to ='/artwork'><li><a data-page="doodles" className="doodles-link">
      <button className={` ${isActive === "artwork" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("artwork")}>Artwork</button>
        </a></li></Link>
      {/* Button to Photography Page */}
      <Link to ='/photography'><li><a data-page="photography" className="photography-link">
        <button className={` ${isActive === "photography" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("photography")}>Photography</button>
        </a></li></Link>
      {/* Button to CV Page */}
      <Link to ='/cv'><li><a data-page="cv" className="cv-link">
      <button className={` ${isActive === "cv" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("cv")}>CV</button
        ></a></li></Link>
      {/* Button to About Page */}
      <Link to ='/about'><li><a data-page="about" className="about-link">
      <button className={` ${isActive === "about" ? 'btn__nav-basr-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("about")}>About</button>
        </a></li></Link>
      {/* Button to Contact Page */}
      <Link to ='/contact'><li><a data-page="contact" className="contact-link">
      <button className={` ${isActive === "contact" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("contact")}>Contact</button>
        </a></li></Link>     

    </ul>
  </nav>

  );
    }

export default NavBar;

ここで私はボタンに「アクティブ」クラスを追加するナビゲーションバー内で使用しようとしていた機能は次のとおりです。

function ChangeActiveButton(selectedButton) {
    //What can i do here?
}

export default ChangeActiveButton;

Shmiliブロイヤー：

あなたは使用することができuseState、そのために

あなたの関数では（復帰前）にこれを書きます

const [isActive,setActive] = useState("home")

あなたは、インポートする必要があるuseStateからreactとボタンのライトの上に、この

 <button className={` ${isActive === "contact" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => setActive("contact")}>Contact</button>

また、使用することができますNavLinkからreact-router-dom小道具を持っているactiveClassName（これはボタンにリンク上のクラスではなく入れます）

ReactJsは - どのように私は、現在使用されているページに応じて、ナビゲーションバーのボタンに「アクティブ」クラスを追加することができますか？

おすすめ