web-dev-qa-db-fra.com

en utilisant le même composant pour un chemin de routage différent dans react-router v4

J'essaie d'avoir des itinéraires séparés mais le même composant pour ajouter/modifier des formulaires dans mon application React comme ci-dessous:

<Switch>
        <Route exact path="/dashboard" component={Dashboard}></Route>
        <Route exact path="/clients" component={Clients}></Route>
        <Route exact path="/add-client" component={manageClient}></Route>
        <Route exact path="/edit-client" component={manageClient}></Route>        
        <Route component={ NotFound } />        
</Switch>

Maintenant, dans le composant manageClient, j'analyse les paramètres de requête (je passe une chaîne de requête avec l'ID client dans la route d'édition), je rends conditionnellement en fonction du paramètre de requête passé.

Le problème est que cela ne remonte pas le composant entier à nouveau. Supposons qu'une page de modification soit ouverte et que l'utilisateur clique sur ajouter un composant, l'URL change, mais le composant ne se recharge pas et reste donc sur la page de modification.

Existe-t-il un moyen de gérer cela?

javascriptreactjsreact-router-v4
24
beNerd

L'utilisation de key différents pour chaque route devrait forcer les composants à reconstruire:

    <Route 
      key="add-client"
      exact path="/add-client"
      component={manageClient} 
    />

    <Route 
      key="edit-client"
      exact path="/edit-client"
      component={manageClient} 
    />
37
Armus

Une solution consiste à utiliser la fonction inline avec le composant, qui rendra un nouveau composant à chaque fois, mais ce n'est pas une bonne idée.

Comme ça:

<Route exact path="/add-client" component={props => <ManageClient {...props} />}></Route>
<Route exact path="/edit-client" component={props => <ManageClient {...props} />}></Route>

La meilleure solution serait d'utiliser componentWillReceiveProps méthode de cycle de vie dans le composant ManageClient. L'idée est chaque fois que nous rendons le même composant pour deux routes et que nous basculons entre elles, alors react ne démontera pas le composant, il mettra à jour le composant uniquement. Donc, si vous effectuez un appel API ou avez besoin de certaines données, faites tout dans cette méthode lors du changement d'itinéraire.

Pour vérifier, utilisez ce code et voyez qu'il sera appelé lors du changement d'itinéraire.

componentWillReceiveProps(nextProps){
   console.log('route chnaged')
}

Remarque: Mettez la condition et n'appelez l'api que lorsque l'itinéraire change.

5
Mayank Shukla