Selesaikan masalah menjadi tidak ditentukan dalam atribut penghalaan React

Question

Saya mahu menghantar beberapa sifat (memuatkan dan getContacts) kepada komponen dalam ReactJS. Saya menggunakan penghalaan untuk mendapatkan setiap laluan, tetapi hasilnya tidak ditentukan dalam komponen sasaran. Bagaimana keadaan ini?

const App = () =>
  
  const [getContacts, setContacts] = useState([]);
  const [loading, setLoading] = useState(false);
  
  kembali(
    <div className='App'>
        <Navbar/>
       
        <Laluan>
          <Laluan laluan='/' elemen = {<Navigasi ke ="/contacts"/>}/>

          <Laluan laluan='/contacts' loading= {loading} contacts= {getContacts} element= {<Contacts/>} />

          <Laluan laluan="/contacts/add" elemen = {<AddContact/>}/>

          <Laluan laluan = "/contacts/:contactId" elemen = {<ViewContact/>}/>

          <Laluan laluan = "/contacts/edit/:contactId" elemen = {<EditContact/>}/>

          <Laluan laluan="*" elemen={

              <div className='text-light py-5'>
                Tidak ditemui!
              </div>}

          />

        </Laluan>

    </div>
);
eksport Apl lalai;

Dalam Contact.jsx saya ada:

const Kenalan = ({ kenalan, memuatkan }) =>

    kembali (
        <>
            <div>{contacts}</div>
            <div>{loading}</div>
        </>
    );
};

eksport Kenalan lalai;

Tetapi semuanya tidak ditentukan.

Answer 1

Anda menghantar prop kepada komponen <Route/> anda.

<Route
  path="/contacts"
  loading={loading}
  contacts={getContacts}
  element={<Contacts />}
/>

Tetapi anda harus menyerahkannya kepada <Contacts/>komponen

sebenar anda

<Route
  path="/contacts"
  element={<Contacts loading={loading} contacts={getContacts} />}
/>

Answer 2

Cuba letakkan pembolehubah keadaan terus ke dalam elemen anak:

<Route path='/contacts' element={<Contacts loading={loading} contacts={getContacts}/>} />