問題発生
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のルーティングの書き方の違いはこのページが詳しかったです。