【エラー対応】Uncaught Error: XXX is not a XXX component. All component children of XXX must be a XXX or XXX

React Routerに関するエラー対応に関して記載。

エラー

ReactでRouteを使用して開発を進めていたところ次のエラーが発生した。
他の人が10分でも時間消費せずに済むように解決方法を記述する。

Uncaught Error:
XXX is not a XXX component. All component children of XXX must be a XXX or XXX

XXXはそれぞれ任意の値

実際にエラーが発生したソースはこれ。

      <Routes>
        <Route path="/page1" />
          <Page1 />
      </Routes>

解決方法

エラー解消ソースはこれ。

      <Routes>
        <Route path="/page1" element={<Page1 />} />
      </Routes>

Routeのelement属性の中に書くようにした。

原因

どうやら、<Routes> の中には <Route> または <React.Fragment> しか書いてはいけないようだ。
React Router v6からこのようなルールになったそうだ。
ちなみに、elementではなくrender属性で書くのもダメ。elementのみ。

参考