【要約】Uncaught Error: [Home] is not a component. All component children of must be a or [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
開発者が react-router-dom のバージョンアップに伴い、ルーティングの実装を変更した際にエラーに直面した。Switchコンポーネントが利用できなくなったため、後継のRoutesコンポーネントを導入したことが原因である。
- ・Routesコンポーネントの直下に、コンポーネントを直接ネストした。
- ・Routesの子要素はRouteまたはReact.Fragmentでなければならない。
- ・この制約に違反したため、実行時にUncaught Errorが発生した。
// Approach
開発者は react-router-dom v6 の正しい構文を適用することで、エラーの解消を図った。コンポーネントの渡し方を、従来のネスト方式からプロップスによる指定方式へと変更した。
- ・Routesの直下には必ずRouteコンポーネントを配置する。
- ・表示したいコンポーネントは、Routeのelementプロップスに渡す。
- ・これにより、Routesの子要素制約を遵守した実装へと修正した。
// Result
実装を修正した結果、ルーティングのエラーが解消され、アプリケーションが正常に動作するようになった。修正により、以下の成果が得られた。
- ・Routesコンポーネントの仕様に適合した正しい記述を実現した。
- ・react-router-dom v6 の宣言的なルーティングが利用可能となった。
- ・バージョンアップに伴う破壊的変更への適切な対処が完了した。
Senior Engineer Insight
> v6への移行は破壊的変更を伴う。SwitchからRoutesへの変更は単なる名称変更ではない。elementプロップスの導入など、API設計が刷新されている。大規模開発では、ライブラリのメジャーアップデート時に、こうした仕様変更を事前に把握し、移行計画を立てることが不可欠である。現場では、こうした些細な構文の違いが、ビルドエラーや実行時エラーとして顕在化する。