結論

preventDefault()を使うです。

リンク遷移したくない要素の関数の先頭でpreventDefault()を宣言すればイベントの発生を抑制できるので、それを使用しました。

実装

簡単に実装例を記載します。

export const MyComponent = () => {
  const handleClick = (e) => {
    e.preventDefault();
    // 何かの処理
  };

  return (
    <a href='/test'>
      <div>この部分はクリックすると/testに遷移する</div>
      <div onClick={(e) => handleClick(e)}>この部分はクリックしても遷移しない</div>
    </a>
  );
};

終わりに

簡単な内容ですがこの情報があなたのお役に立てたら幸いです。

ReactもJSですが、単純なクリックイベントの取得方法とかは忘れやすいのでこういった形で残しておこうと思います。

それではまた機会があればお会いしましょう。