PC & Mobile

Pourquoi je n’utilise pas React-Router – bgdam – Medium

Pourquoi je n’utilise pas React-Router - bgdam - Medium


React-Router est la solution de routage la plus répandue sur le marché pour les applications React, à tel point que nombre de développeurs la considèrent comme la «solution de routage officielle» de React. Bien que je sois certain que React-Router fonctionne assez bien pour beaucoup de gens, je n’ai jamais aimé travailler avec React-Router. Je vais essayer de résumer mes raisons dans cet article.

React-Router est sans doute la solution de routage la plus populaire pour l’écriture d’applications React de nos jours. De nos jours, la plupart des développeurs front-end incluent automatiquement Redux, React-Redux et React-Router en tant que dépendances de facto pour pratiquement toutes les applications. Comprendre Redux, c’est quelque chose que je peux comprendre, car il offre quelques avantages concrets, mais ce que je ne comprends pas, c’est pourquoi quiconque se contenterait d’une solution de routage à la fois inférieure et inutilement compliquée.

Pour rappel, permettez-moi de dire que même si je travaille en parallèle depuis 12 ans, ma préférence a toujours été de travailler sur le back-end ou sur des frontaux autres que des navigateurs. J'avais l'habitude de détester écrire du code frontal pour les navigateurs, parce que c'était trop compliqué et qu'il était inévitablement transformé en un fouillis énorme de code spaghetti. Heureusement, ces dernières années, l’outillage pour le front-end s’est considérablement amélioré et la plupart de mes problèmes ont été résolus. J'ai commencé à écrire activement du code frontal de navigateur lorsque j'ai commencé à apprendre à réagir à React, il y a environ trois ans.

Donc, en tant que gars qui a beaucoup travaillé sur le backend, à la fois sur les API et les applications Web, renvoyant des pages HTML restituées, en utilisant php qui s’exécute sur cgi-bin (avec des chemins vers des fichiers mappés en tant que URL), Express - routage explicite défini. J'ai une idée très précise de ce qu'est un routeur, de ce qu'il devrait faire et de la façon dont il devrait le faire. Pour moi, un Routeur est un morceau de code qui utilise l’URL demandée pour identifier un Manette, et exécuter ce contrôleur, en lui fournissant un certain le contexte, qui contient généralement des informations sur la requête entrante. C'est tout. Rien de plus.

Si vous examinez le routeur d’Express.JS, vous verrez que c’est exactement ce qu’il fait. Il expose une API, qui vous permet d’enregistrer des contrôleurs sur des itinéraires (et méthodes), puis lorsqu’une demande est reçue pour l’un des itinéraires enregistrés, il exécute les contrôleurs enregistrés dans l’ordre dans lequel ils ont été enregistrés. API qui offre néanmoins beaucoup de flexibilité et de fonctionnalités. Ceci est mon étalon or pour un routeur. Il fait une chose, il le fait bien et reste en dehors de votre chemin les autres fois.

Voyons donc ce que je n’aime pas chez React-Router et pourquoi.

Tout est un composant de React-Router.

Mon point de vue sur les composants a toujours été qu'ils faisaient partie de la couche de vue, et lorsque j'écris des applications, je veille à ce que la logique métier, telle que les appels d'API, la validation, etc., soit exclue du composant réel. J'essaie plutôt de les conserver au même niveau. niveau du contrôleur.

Cependant, l’approche «tout est une composante» de React-Router rend cela impossible. Dites que je veux extraire des données de mon backend avant de restituer un composant, la solution à cela dans React-Router consiste à créer un nouveau composant personnalisé qui "bloquera" la navigation jusqu’à ce que les données soient disponibles.

Selon la documentation de React-Router, React-Router comprend trois types de composants, dont un seul (Lien) est en fait un composant de vue. Les autres sont là pour activer le routage. Pourquoi mon routeur joue-t-il le rôle de composants React?

Différents routeurs pour différents environnements

React-Router expose deux routeurs différents, BrowserRouter et StaticRouter. Si vous devez effectuer quelques requêtes d'API pour extraire des données avant le rendu, la manière de procéder varie considérablement en fonction du routeur que vous utilisez. Presque tous les exemples de rendu côté serveur que j'ai vus avec React-Router montrent des différences significatives dans le code de routage du serveur et dans le code de routage du navigateur. Cela limite la quantité de code pouvant éventuellement être réutilisée entre le serveur et le client.

Du côté du serveur, vous devez réellement utiliser matchPath Une méthode interne utilisée par le routeur pour vérifier manuellement si le chemin d'accès correspond au chemin de la demande entrante, puis appeler la fonction d'assistance associée pour effectuer l'appel API et obtenir les données. Attends une minute! Faire correspondre un chemin et appeler le contrôleur enregistré n’est-il pas littéralement la définition d’un routeur? Donc, pour effectuer un rendu côté serveur avec l'extraction de données asynchrone à l'aide de React-Router, vous devez écrire votre propre mini-routeur à l'intérieur du répertoire. StaticRouter?

Verrouillage sur les composants de vue spécifiques au routeur

Si vous voulez que React-Router gère un changement d’itinéraire, déclenché par un clic sur un lien, vous devrez utiliser l’un des deux Lien ou NavLink composants exportés par React-Router. Si vous n'utilisez pas ces composants, React-Router n'acceptera pas le changement d'itinéraire et votre navigateur effectuera une redirection de la page complète vers l'URL du lien.

Donc, vous allez vous retrouver avec beaucoup de Lienle sable NavLinks jonché dans votre application. Cela signifie que si vous décidez finalement de passer de React-Router à un autre poste, vous devrez réécrire chaque composant de votre système utilisant ces composants. Je ne suis pas un grand fan de ce verrouillage et préférerais m'en passer.

Intégration avec React-Redux

Dans des conditions très spécifiques, React-Router ne rendra pas les composants mis à jour lorsque l’URL sera modifiée. Pour être honnête, c’est une situation très bien connue et documentée, mais le fait est que ce n’est pas vraiment un cas extrême et que la probabilité que cela se produise dans votre application est assez grande. Et le moyen de résoudre ce problème est d’ajouter encore du code standard.

Et si vous souhaitez utiliser Redux pour gérer vos itinéraires, c’est contre la pratique recommandée. Au lieu de cela, vous devrez utiliser un système complètement séparé. Routeur React connecté module pour "synchroniser vos itinéraires avec votre magasin". Je ne sais même pas ce que cela signifie ou pourquoi je devrais le faire.

Changements majeurs

C'est la dernière raison pour laquelle je n'utilise pas React-Router. React-Router v4 a complètement supprimé le concept de configuration de route centralisée, et ils ne fournissent pas un remplacement entièrement fonctionnel. A compter d'aujourd'hui (4 janvier 2019), le réagir-routeur-config package qui était censé fournir cette fonctionnalité, est toujours en version bêta.

Je comprends qu'un projet peut vouloir apporter des modifications radicales et que, dans de nombreux cas, de telles modifications sont tout à fait justifiables, mais lorsqu'un grand sous-ensemble de vos utilisateurs utilise activement une fonctionnalité et que vous décidez de la supprimer, vous devez au préalable. à tout le moins, fournir une solution de remplacement stable. Je ne veux pas m'inquiéter d'un scénario futur hypothétique lorsque les développeurs décident de déconseiller certaines fonctionnalités sur lesquelles repose fortement mon application et m'obligent à me retrouver dans une situation où je dois réécrire beaucoup d'éléments pour supprimer toute dépendance à cet égard. fonction ou exécutez une version obsolète de la bibliothèque.

Ce sont donc les principales raisons pour lesquelles je n'aime pas et n'utilise pas React-Router. Si vous souhaitez savoir quel est mon routeur de choix pour les applications React, je suis désolé de vous décevoir, mais je n’en ai pas vraiment. Au lieu de cela, j’utilise simplement un routeur local que j’utilise depuis à peu près pour l’ensemble de mes SPA (réactifs et non réactifs). Il imite l’API du routeur ExpressJS, avec quelques ajustements, de sorte qu’il peut être utilisé pour le routage isomorphe et le rendu des composants React. Je vais parler de la façon dont je gérerai le routage dans mes applications React utilisant ce routeur local dans une publication ultérieure.

J'aimerais entendre votre opinion sur les choses que j'ai écrites dans ce billet. J'aimerais entendre votre opinion sur cet article, alors faites-le dans les commentaires ci-dessous.

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close