問題タブ [react-router-component]

これは私のファイル構造です

私の App.js ファイルでは、Axios を使用して Api からデータをフェッチし、'CharacterList' コンポーネントを返し、フェッチ結果から取得したプロパティを渡しました。

CharacterList コンポーネントでは、props を介して App.js からデータを受け取り、それをマッピングして、取得した結果のリストを作成しました。正常に動作し、正確に表示されます。

私の Tabnav コンポーネントでは Route をインポートし、このように CharacterList コンポーネントを Route に渡している間、リンクをクリックするたびに<Route path="/characters" component={CharacterList} />を受け取ります。TypeError: Cannot read property 'map' of undefined

ルートがないとデータは正常に表示されますが、ルートを使用すると「マップ」エラーが返されます。ここで何が起こっているのか、どうすればこの問題を解決できますか?

ありがとう！

想定: すべてのページに検索フォームがあります。送信すると、取得したデータが表示されます。

発生: フォームを送信すると、TypeError: dataItems is undefined が表示されます

これが私のアプリコンポーネントです

これが私のフォームですAnimeSearchForm

そして、私のコンポーネントがレンダリングされるAnimeCard

React Router の history API を使用してコンポーネントをレンダリングしようとしましたが、その時点で使用していたコンポーネントでレンダリングされてしまいました。つまり、ホームページで検索すると、検索結果がすべてのホームページ コンテンツとともにホームページに表示されます。そのため、リダイレクトを使用してみましたが、この問題が発生しました。

この投稿を参照して転がりましたが、役に立ちませんでした。

さまざまなチュートリアルと複数の stackOverflow の質問を検索しました。そしてどれも、非常に基本的な問題を解決するのに役立ちませんでした:
react-router-dom でネストされたルートを実装
する これまでの私のコードは次のとおりです:

App.js

DefaultLayout.js

/home/usersに移動すると、react-router-dom がDefaultLayout.js内で検索するので はなく、App.js内でそのルートの定義を検索しているため、空白の画面が表示されます。1:私は正確に何を間違っていますか? 質問 2: react-router-dom は、 App.js内ではなく、DefaultLayout.js内でネストされたルートを探す必要があることをどのように認識していますか?

2 日経ちましたが、まだこの単純な問題を解決できません。
どんな助けでも大歓迎です。
編集 1:非常に単純なネストされたルーティングを実装するためだけに、新しいプロジェクトを開始しました。

App.js

ParentComponent.js

ネストされたComponentOne.js

nestedComponentTwo.js

しかし、ネストされたコンポーネントにアクセスしようとすると、空白の画面が表示されます...