2
votes

L'état est perdu lors de la navigation manuelle dans une application React Redux

Contexte rapide - J'ai une application React Redux créée à l'aide de l'ARC CLI. Il y a 2 pages ou routes configurées dans mon App.js en utilisant BrowserRouter et Route de react-router-dom . L'un est / products qui affiche tous les produits. Le deuxième est / product-details qui montre les détails d'un produit.

Problème 1 - Quand je viens sur la page des produits, l'état redux contient toutes les informations sur les produits. Lorsque je navigue manuellement vers l'url / product-details , l'état de redux avec toutes les informations sur le produit est perdu. Pourquoi cela se produit-il?

Problème 2 - Autre que la navigation manuelle, comment puis-je naviguer par programmation de / products vers / product-details page sans perdre l'état redux? P >

J'ai essayé d'utiliser BrowserHistory comme suggéré dans d'autres réponses SO. Mais cela ne semble pas fonctionner pour les deux problèmes ci-dessus.

<Router>
    <div>
      <Route path="/" exact component={Products} />
      <Route path="/product-details" component={ProductDetails} />
    </div>
</Router>

Attendu

Lorsque je navigue manuellement vers les détails du produit à partir de la barre d'adresse, l'état de la page / products doit être disponible
Doit pouvoir accéder par programme à la page / product-details et à l'état disponible.

reactjs react-router state redux

0 commentaires

3 Réponses :

3
votes

1) Où avez-vous obtenu les données du serveur? peut-être la page des produits? Si tel est le cas, vous ne pouvez pas conserver les données lorsque vous accédez manuellement à la page de détails. Dans votre cas, dans la page de détail, vous devez envoyer une demande au serveur avec l'ID produit pour obtenir informations détaillées sur le produit. Ensuite, cela fonctionnera à coup sûr.

2) La page Route for details devrait ressembler à ceci. Et vous pouvez aller à la page de détail comme celle-ci. this.props.history.push ('/ product-details / 1'); Cela fonctionnera à coup sûr.

0 commentaires

3
votes

Il semble que la façon dont vous naviguez entraîne la récupération de la nouvelle page sur le serveur. Par exemple, si vous modifiez manuellement l'URL dans la barre d'adresse ou définissez l'URL avec l'API de localisation du navigateur, cela déclenchera un chargement de page. La façon de naviguer sans déclencher un nouveau chargement de page consiste à utiliser API d'historique de react-routeur depuis votre composant comme ceci:

this.props.history.push('/product-details');

0 commentaires

2
votes

Vous devez utiliser pour naviguer entre les pages lorsque vous utilisez le routeur. Sinon, la page sera actualisée et votre boutique redux sera réinitialisée. Si vous entrez l'URL directement dans le navigateur et accédez à la page product-detail , cela ne fonctionnera pas.

<Link to="/product-details" />

1) Lorsque je navigue manuellement vers les détails du produit à partir de la barre d'adresse, L'état de la page / products doit être disponible

Dans ce cas, vous devez à nouveau récupérer les détails du produit. Mais vous avez besoin d'un identifiant de produit pour cela. Vous pouvez utiliser l'itinéraire / product-details /: id pour cela. Obtenez l ' id dans votre composant de détails du produit et en utilisant Fetch obtenir les détails du produit

2) Doit être capable de naviguer par programmation vers le / product-details page et l'état disponible.

Pour un clic de souris, utilisez . Pour utiliser par programme p >

0 commentaires