問題発生

react-routerを使おうとすると下記のエラーが発生した。

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

<意訳>
ProxyFacadeはRouteコンポーネントではありません。すべてのRoutesの子コンポーネントはRouteコンポーネントである必要があります。

原因

StackOverflowの情報によるとreact-hot-loaderがすべてのエレメントをProxyFacadeでラッピングするため、react-routerがRoutesコンポーネントの子要素としてRouteコンポーネントがないと認識してしまうようだ。

対処方法

ソースコードの修正をリアルタイムに反映するためにreact-hot-loaderを使っていたが、react-router v6と相性が悪くて断念。
v6の方がルーティングを簡略化してかけたりして便利なんだけど、今回はv6でなくv5を使うことにした。
巷のreact-routerの情報もv5のものが多いのでv6は時期尚早かもしれない。

yarnを使ってv5をインストールする方法は下記の通り。

yarn add react-router@v5
yarn add react-router-dom@v5

おまけ

react-routerとreact-router-domの違いはこの記事が分かりやすかったです。

v5とv6のルーティングの書き方の違いはこのページが詳しかったです。