リンクコンポーネントに onClick イベントハンドラーを設定する

1. React の Link コンポーネント
2. React で Link コンポーネントの onClick イベントを処理する

イベントハンドラーの設定は、React アプリケーションを構築する上で重要な部分です。

onClick は最も一般的なイベントの 1つであり、通常は <button> 要素と <span> 要素で定義されます。この記事では、Link コンポーネントのイベントハンドラーを設定します。

React の Link コンポーネント

React ルーターは、R​​eact でナビゲーションを構成するためのメインライブラリです。

ナビゲーションシステムを構築するために必要なすべてのビルディングブロックを提供します。Link は、ReactRouter によって利用可能になった最も重要なコンポーネントの 1つです。

このコンポーネントは、HTML の <a> タグのはるかに高度な代替手段です。多くの場合、Link コンポーネントを使用して、アプリ内のページへのナビゲーションメニューまたは 1 回限りのリンクを作成します。

コンポーネントは多くのプロップを受け入れますが、to がおそらく最も重要です。このプロップを使用すると、Link コンポーネントがナビゲートするホームページを基準にしたパスを指定できます。

例を見てみましょう：

<Link to="/contact">Contact Us</Link>

ホームページが www.homepage.com だとすると、このリンクをクリックすると、www.homepage.com/contact に移動します。クリックイベントが発生した場合、Link コンポーネントのデフォルトの動作は、指定されたパスに移動することです。

ただし、デフォルトの動作以外に別の操作を実行したい場合はどうなりますか？

onClick 属性

Link コンポーネントは onClick 属性も受け入れます。これは、中括弧内のハンドラー関数（またはその参照）と等しく設定する必要があります。簡単な例を見てみましょう。

import "./styles.css";
import { Link, BrowserRouter } from "react-router-dom"
export default function App() {
  return (
    <BrowserRouter>
    <div className="App">
      <Link to="/page" onClick={() => alert("boo")}>Clickable Link</Link>
    </div>
    </BrowserRouter>
  ); 
}

この簡単な例では、Link コンポーネントがあります。

デフォルトの動作によると、それをクリックすると、/page ルートに移動します。ただし、onClick 属性を指定したため、イベントハンドラーとしても機能します。

この場合、単純なテキストを警告します。codesandbox を見て、自分で試してみることができます。

中括弧は、それらの間の式が有効な JavaScript として扱われるようにするために必要であることに注意してください。

React で Link コンポーネントの onClick イベントを処理する

Link コンポーネントに onClick イベントハンドラーが必要であることが 100％確実でない限り、他の方法で操作することをお勧めします。

別のイベントハンドラーを設定すると、ナビゲーションが遅れ、そもそも Link コンポーネントを使用する目的が失われます。コンポーネントが最初にイベントハンドラーを実行し、その後パスをナビゲートするため、ナビゲーションは遅延します。

それでも、ユーザーがアプリの特定のページにアクセスしたときに、特定の操作を実行する必要がある場合があります。代わりに、新しいコンポーネントの componentDidMount() ライフサイクルメソッド（または useEffect() フック）を変更することで、これを行うことができます。

このようにして、ユーザーがページに到達したときに関数を実行できます。また、ナビゲーションに遅延はありません。

リンクの例を自分でチェックすると、遅延に気付くでしょう。