Reactでの現在のナビゲーションリンクのハイライト方法

ルーティングライブラリを使用する方法: もし、React Routerなどのルーティングライブラリを使用している場合、パスに基づいて現在のリンクをハイライトすることができます。具体的なコード例は次の通りです:
```
import { NavLink } from 'react-router-dom';
function Navigation() {
 return (
   <nav>
     <NavLink to="/" activeClassName="active">ホーム</NavLink>
     <NavLink to="/about" activeClassName="active">について</NavLink>
     <NavLink to="/services" activeClassName="active">サービス</NavLink>
   </nav>
 );
}
```
上記の例では、NavLinkコンポーネントを使用し、activeClassNameプロパティを設定してハイライトのスタイルを適用しています。

状態管理を使用する方法: もし、ルーティングライブラリを使用せずに状態管理を行っている場合、現在のパスを状態として追跡し、それに基づいてリンクをハイライトすることができます。以下に、簡単なコード例を示します:

import { useState } from 'react';
function Navigation() {
 const [currentPath, setCurrentPath] = useState('/');
 const handleLinkClick = (path) => {
   setCurrentPath(path);
 };
 return (
   <nav>
     <a
       href="/"
       className={currentPath === '/' ? 'active' : ''}
       onClick={() => handleLinkClick('/')}
     >
       ホーム
     </a>
     <a
       href="/about"
       className={currentPath === '/about' ? 'active' : ''}
       onClick={() => handleLinkClick('/about')}
     >
       について
     </a>
     <a
       href="/services"
       className={currentPath === '/services' ? 'active' : ''}
       onClick={() => handleLinkClick('/services')}
     >
       サービス
     </a>
   </nav>
 );
}

上記の例では、currentPathという状態変数を使用し、リンクのクリックイベントで現在のパスを更新しています。その後、classNameプロパティを使用してハイライトのスタイルを適用しています。

以上がReactで現在のナビゲーションリンクをハイライトするいくつかの方法です。