J'ai ce problème auquel je suis confronté en réaction lié au routage. Il y a ce bouton qui apparaît à l'écran qui n'apparaît que si l'utilisateur est authentifié et donc c'est une route privée "/home/coupons".

Lorsque l'utilisateur clique sur l'un des coupons, j'ai dirigé l'utilisateur vers

http://localhost:3000/coupons?id=6

En utilisant cette props.history :

        this.props.history.push({
                 pathname: '/coupons',
                 search: '?id='+id,

           })

J'ai fait le routage pour cela dans mon App.js :

<Route path="/coupons" component={CouponsRedeem}/>

Le composant CouponsRedeem a besoin de l'identifiant du composant vers lequel les utilisateurs sont dirigés lorsqu'il clique sur /home/coupons.

Mon souci est que si l'utilisateur atteint directement l'itinéraire /coupons sans accéder à /home/coupons, l'ensemble de l'application Web s'interrompt car nous n'obtenons rien dans this.props.location.

Comment puis-je m'assurer que de telles choses n'arrivent pas ?

Mon routage est-il fait correctement ?

Toutes les suggestions sont les bienvenues. S'il manque d'informations, j'ajouterai d'autres extraits de code. J'utilise react-router.

1
dfsdigging 18 mars 2019 à 23:49

2 réponses

Meilleure réponse

La solution à votre problème est assez simple. Soit vous avez une valeur par défaut que vous utilisez lorsque l'utilisateur n'a pas navigué de home/coupons à coupons puisque history.location.search n'a rien ou vous reconfigurez votre Route pour utiliser le paramètre Router où dans au lieu d'interroger votre spécifier votre route comme

<Route
   exact
   path="/coupons/:id"
   component={Coupon.Show}
/>

Et l'utiliser comme

 this.props.history.push({
      pathname: `/coupons/${id}`,
 })

Ou bien si le coupon n'est pas reçu vous pouvez rediriger l'utilisateur vers la route home/coupons

1
Shubham Khatri 19 mars 2019 à 06:19

En regardant votre implémentation, je suppose que vous utilisez soit react-router, soit reach-router ?

Si tel est le cas, d'après mon expérience, j'ai tendance à utiliser des accessoires de route pour spécifier qu'un ID doit être attendu.

Je configurerais généralement une route pour l'index et une route pour afficher un objet et une route par défaut pour aucune correspondance (pensez à cela comme un 404) comme ceci:

 <Route
   exact
   path="/coupons"
   component={Coupon.Index}
 />
<Route
   exact
   path="/coupons/:id"
   component={Coupon.Show}
/>
<Route component={NoMatch} />

Spécifier la prop "exacte" garantit qu'il ne rendra ce composant que lorsque le chemin correspond correctement, donc si vous ne voulez pas d'itinéraire d'index, vous pouvez l'omettre complètement et lorsque vous y accédez, il reviendra au composant NoMatch

L'exemple que j'ai fourni modifierait son apparence dans la barre d'adresse pour une approche plus RESTful, donc au lieu de

http://localhost:3000/coupons?id=6 ce serait http://localhost:3000/coupons/6

Dans le composant show, vous pouvez ensuite accéder à la valeur prop par le nom que vous spécifiez après les deux points ":id" dans votre composant Show, en utilisant les props fournis par le routeur comme suit :

Let { id } = this.props.match.params;

J'espère que ça aide

0
ThatCoderGuy 18 mars 2019 à 22:02