イベントハンドリングの謎（解決編） - 初歩的な問題だった

ずっと詰まっていたところが解決した。結論から言うと、 該当コンポーネントの上に位置しているナビゲーションバーのCSSでposition: fixed;としていたのをposition: sticky;に修正することで下部のコンポーネントの最初の要素がクリッカブルになって無事解決した。

元々親コンポーネントの構成はこんな感じ

      <Router>
        <Navbar/>
        <Routes>
          <Route path="/" element={<Home/>}></Route>

          --その他Route--

        </Routes>
        <Footer/>
      </Router>

ここでNavbarのCSSがこうなっていた

nav {
    width: 100%;
    background-color: #0c0c54;
    color: white;
    height: 70px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 1000;
    font-size: 16px;
    font-weight: 400;
    padding-right: 10px;
}

Stickyに表示するためにz-indexを設定しているが、下のHomeコンポーネントも要素として見えてはいた。ここでpositionをfixedにしてさらにz-indexを指定していると、ページ全体を覆うようにヘッダーが下位要素の上層にきてしまい、下位要素のリンクが反応しなくなってしまうらしい。

ヘッダーをposition:fixedで固定してz-indexを指定した時、下位要素のリンクがクリック出来ない - NatsukiMemo なつ記メモ of WEBデザインTIPS

【CSS】重なり順（z-index）の値が下の要素をクリックする方法 | 株式会社オンズ

【CSS】ヘッダーを固定したとき重なる問題の解決策2選 | ベル15の開発ブログ

自分は表示上の問題はpaddingで解決していたが、Navbarは単なる装飾要素ではなくクリッカブルにしたいのでpointer-events:none;ではなくpositionの修正で解決した。 今回はReactのコードの問題だとばかり思って延々調べていたが、本来のアプローチとしては

1. リンクが期待通りに動いていないことを発見する
2. そもそもブラウザがリンクとして認識していないことを発見する
3. 開発者ツールでCSSを見ておかしなところがないか探す
4. CSSでありうる原因をネット・GPTで調べる

と言う手順でやるべきだった。２を発見することが遅れたのはChromeのスマホモードで見ていたのでポインタの切り替わりがなくそもそもブラウザがクリッカブルな要素として認識していないのか、クリック後の処理がおかしいのかの区別がついていなかった。