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

Question

Je souhaite envoyer certaines propriétés (loading et getContacts) à 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 ?

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 ;

Dans Contact.jsx, j'ai :

const Contacts = ({ contacts, chargement }) =>

    retour (
        ≪>
            <div>{contacts}</div>
            <div>{chargement}</div>
        ≪/>
    );
} ;

exporter les contacts par défaut ;

Mais ils ne sont tous pas définis.

Answer 1

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} />}
/>

Answer 2

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

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