【React】React-Routerでのエラー `Uncaught Error: [Page1] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>`

初めに

React-Routerを導入してページ遷移を試みたときのエラーです。

現象

以下のような記述をしていたら、

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

このようなエラーが出ました。

Uncaught Error: [Page1] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

原因

こちらの書き方は古い書き方v5系の書き方だったようです。

v6からは違う書き方で書く必要があります。

解決法

下記のように書いたらエラーがなくなりました。

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

elementに{<Component>}のような形で渡すことページ遷移を実現できました。

まとめ

学習の際は古い情報のこともあるので、自分でそこら辺は調査しながら学習していきたいものだと感じました。