Lösen Sie das Problem, dass die React-Routing-Attribute undefiniert werden

Question

Ich möchte einige Eigenschaften (loading und getContacts) an eine Komponente in ReactJS senden. Ich verwende Routing, um jeden Pfad abzurufen, aber das Ergebnis ist in der Zielkomponente undefiniert. Wie läuft das?

const App = () =>
  
  const [getContacts, setContacts] = useState([]);
  const [loading, setLoading] = useState(false);
  
  zurückkehren(
    <div className='App'>
        <Navbar/>
       
        <Routen>
          <Route path='/' element = {<Navigieren zu ="/contacts"/>}/>

          <Route path='/contacts' Laden= {Laden} Kontakte= {getContacts} Element= {<Kontakte/>} />

          <Route path="/contacts/add" element = {<AddContact/>}/>

          <Route path = "/contacts/:contactId" element = {<ViewContact/>}/>

          <Route path = "/contacts/edit/:contactId" element = {<EditContact/>}/>

          <Route path="*" element={

              <div className='text-light py-5'>
                Nicht gefunden!
              </div>}

          />

        </Routen>

    </div>
);
Standard-App exportieren;

In Contact.jsx habe ich:

const Contacts = ({ Kontakte, Laden }) =>

    zurückkehren (
        <>
            <div>{Kontakte}</div>
            <div>{loading}</div>
        </>
    );
};

Standardkontakte exportieren;

Aber sie sind alle undefiniert.

Answer 1

你正在将props传递给你的<Route/>组件。

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

但是你应该将它们传递给你的实际<Contacts/>组件

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

Answer 2

尝试将状态变量直接放入子元素中：

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