React Routerで「No routes matched location "/"」が出る理由（/cards/:id ルーティング設定の基本）

はじめに

ページがうまく反映されなかったのでコンソールを確認したら以下のエラーが出てました。

installHook.js:1 No routes matched location "/"

問題

このエラーは、/ にマッチするルートが定義されていないのが原因でした。今の状態だと、「あなたのアプリは「/ に表示する画面が無い」ため、検証コードを書いたコンポーネントまで到達していない可能性が高いです。」という感じです。

解決方法

Router に / を追加して/ でも動くようにします。

import { Routes, Route, Navigate } from "react-router-dom";

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/cards/:id" element={<YourPage />} />
</Routes>

おわりに

Routerも設定はReactのバージョンが上がってから少し変わったみたいで、調べてもなかなか出てこなくて少し大変でした。