Maison  >  Questions et réponses  >  le corps du texte

Résoudre le problème de la non-définition des attributs de routage React

<p>Je souhaite envoyer certaines propriétés (<code>loading</code> et <code>getContacts</code>) à un composant dans ReactJS. J'utilise le routage pour obtenir chaque chemin, mais le résultat n'est pas défini dans le composant cible. Comment ça se passe ? </p> <pre class="brush:php;toolbar:false;">const App = () => const [getContacts, setContacts] = useState([]); const [chargement, setLoading] = useState(false); retour( <div className='App'> <Barre de navigation/> <Itinéraires> <Route path='/' element = {<Naviguez vers ="/contacts"/>}/> <Route path='/contacts' chargement= {loading} contacts= {getContacts} element= {<Contacts/>} /> <Route path="/contacts/add" element = {<AddContact/>}/> <Chemin d'itinéraire = "/contacts/:contactId" element = {<ViewContact/>}/> <Chemin d'itinéraire = "/contacts/edit/:contactId" element = {<EditContact/>}/> <Route path="*" element={ <div className='text-light py-5'> Pas trouvé! </div>} /> </Itinéraires> </div> ); exporter l'application par défaut ;</pre> <p>Dans Contact.jsx, j'ai : </p> <pre class="brush:php;toolbar:false;">const Contacts = ({ contacts, chargement }) => retour ( ≪> <div>{contacts}</div> <div>{chargement}</div> ≪/> ); } ; exporter les contacts par défaut ;</pre> <p>Mais ils ne sont tous pas définis. </p>
P粉696891871P粉696891871455 Il y a quelques jours547

répondre à tous(2)je répondrai

  • P粉806834059

    P粉8068340592023-08-15 10:22:12

    Vous transmettez des accessoires à votre composant <Route/>.

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

    Mais vous devriez les transmettre à votre <Contacts/>composant

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

    répondre
    0
  • P粉852578075

    P粉8525780752023-08-15 09:54:15

    Essayez de mettre la variable d'état directement dans l'élément enfant :

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

    répondre
    0
  • Annulerrépondre