React ルーティング属性で未定義になる問題を解決する

Question

いくつかのプロパティ (loading および getContacts) を ReactJS のコンポーネントに送信したいと考えています。ルーティングを使用して各パスを取得していますが、結果はターゲットコンポーネントで未定義です。これはどうなっているでしょうか？

const App = () => {
  
  const [getContacts, setContacts] = useState([]);
  const [ロード中、setLoading] = useState(false);
  
  戻る（
    <div className='アプリ'>
        <ナビゲーションバー/>
       
        <ルート>
          <ルート パス='/' 要素 = {<「/contacts」/>に移動}/>

          <ルート パス='/contacts'loading= {loading} contacts= {getContacts} element= {<Contacts/>} />

          <ルート パス="/contacts/add" 要素 = {<AddContact/>}/>

          <ルート パス = "/contacts/:contactId" 要素 = {<ViewContact/>}/>

          <ルート パス = "/contacts/edit/:contactId" 要素 = {<EditContact/>}/>

          <ルートパス="*" 要素={

              <div className='text-light py-5'>
                見つかりません！
              </div>}

          />

        </ルート>

    </div>
);
デフォルトのアプリをエクスポート;

Contact.jsx には次のものがあります:

const 連絡先 = ({ 連絡先, 読み込み中 }) => {

    戻る （
        <>
            <div>{連絡先}</div>
            <div>{読み込み中}</div>
        </>
    );
};

デフォルトの連絡先をエクスポート;

しかし、それらはすべて未定義です。

Answer 1

<Route/> コンポーネントに props を渡しています。

リーリー

ただし、これらを実際の <Contacts/>Component

に渡す必要があります。 リーリー

Answer 2

状態変数を子要素に直接入れてみます:

リーリー