【react-router v7 エラー】Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>

はじめに

今回はRouter設定を react-router v7 で実装しようとした時に遭遇したエラーについてです。

問題

エラーメッセージ

Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>

src/router/Router.tsx

import { Route, Routes } from "react-router";
import { Cards } from "../cards";
import { DynamicSegments } from "../DynamicSegments";

export const Router = () => {
  return (
    <>
      <Route path="/" element={<Cards />} />
      <Route path="/cards/:id" element={<DynamicSegments />} />
    </>
  );
};

解決方法

src/router/Router.tsx

+import { Route, Routes } from "react-router";
import { Cards } from "../cards";
import { DynamicSegments } from "../DynamicSegments";

export const Router = () => {
  return (
    <>
+     <Routes> //RoutesでRouteを囲む
        <Route path="/" element={<Cards />} />
        <Route path="/cards/:id" element={<DynamicSegments />} />
+     </Routes>
    </>
  );
};

おわりに

エラーメッセージを翻訳すると、ちゃんと <Route>を<Routes>で囲んでください と言ってくれていました。
また、公式ドキュメントでも ルートの設定 で書いていました。
ちょっとずつではあるがドキュメントを読む癖がついてきた気がする。

参考