- il y a 2 jours
Développer un applicatif web avec le framework ReactJS 18
On a tous nos composants admin il temps maintenant de brancher tout ça au niveau routage.
Si vous vous souvenez bien on avait fait un fichier de routage pour la partie public il faut donc en faire un pour la partie admin.
Cela va donc nous amener à faire un système de routeur multiple dans notre fichier "d'enter" l'App.js.
Rien de bien compliqué mais il y a quelques subtilitées sur lesquelles il faut faire attention sinon rien ne fonctionne.
👀 Dépôt Github
https://github.com/FaisonsLePoint/front_reactjs
On a tous nos composants admin il temps maintenant de brancher tout ça au niveau routage.
Si vous vous souvenez bien on avait fait un fichier de routage pour la partie public il faut donc en faire un pour la partie admin.
Cela va donc nous amener à faire un système de routeur multiple dans notre fichier "d'enter" l'App.js.
Rien de bien compliqué mais il y a quelques subtilitées sur lesquelles il faut faire attention sinon rien ne fonctionne.
👀 Dépôt Github
https://github.com/FaisonsLePoint/front_reactjs
Catégorie
🤖
TechnologieTranscription
00:00Bonjour à tous et bienvenue dans cette vidéo où nous allons nous occuper du routage de la partie admin.
00:05On avait généré dans la dernière vidéo tous nos composants, tous les composants utiles,
00:12et puis on va donc s'occuper de brancher tout ça.
00:15Je rappelle que pour l'instant, on n'a qu'un seul routeur qui est branché,
00:18le public routeur, donc on n'a que nos routes publiques qui fonctionnent.
00:25Alors, avec le routeur V6, on a des petites particularités,
00:30il y a approximativement deux modes de fonctionnement.
00:35J'en montrerai un ici, peut-être dans une vidéo bonus,
00:38je montrerai l'autre mode de fonctionnement, très certainement d'ailleurs dans une vidéo bonus.
00:42Et si vous vous rappelez bien, quand on avait parlé des routes enfant,
00:46je vous avais dit qu'il y avait une autre façon de faire au niveau du branchement,
00:51quand on voulait se cogner des routes enfant.
00:56J'avais dit que je ne le montrerais pas jusqu'ici.
00:59Là, ça y est, il va falloir que je vous le montre.
01:01Alors, c'est parti, on va déjà dans un premier temps s'occuper de brancher.
01:06Très simplement, on va faire comme ça, voilà.
01:10Le layout admin et la dashboard.
01:13D'ailleurs, le layout, ouais.
01:15Si je regarde, ils ont le même nom, ces couillons.
01:18Donc là, je vais faire le admin layout.
01:22Hop.
01:23Contrôle S.
01:24Et pour garder là une cohérence dans les noms, je vais renommer mon composant.
01:31Ok.
01:32Bon, vous connaissez la méthode.
01:34Dans un premier temps, on va essayer de faire le ping-pong.
01:39Je vais me créer dans l'admin un nouveau fichier index.js.
01:44Je ne vais pas me prendre la tête.
01:46Je vais copier le public.
01:49Et je le mets ici.
01:50Évidemment, pour l'instant, j'ai dit que je ne veux que...
01:55Hop, on va tout modifier.
01:56Et dashboard et le layout admin.
02:01Donc, la dashboard et le layout.
02:10Voilà.
02:11Ok.
02:12Et puis maintenant, je vais m'occuper de l'admin-router.js.
02:19Ok.
02:21R.S.
02:21Hop là, tu ne me l'as pas compris.
02:23Voilà.
02:25Et ici, on a notre admin-router.
02:28Alors, si on reprend le public-router.
02:30Hop.
02:30Je vais me mettre ici.
02:32Et ça, je me mets de côté.
02:35Le routeur public.
02:37Donc, on s'était dit.
02:39On va ramener tous nos composants.
02:43Je vais utiliser le même composant d'erreur.
02:46Et puis, je vais faire mes routes.
02:48Un truc très simple.
02:50Alors, c'est parti.
02:51Déjà, il faut que j'importe route et routeur.
02:57Tac.
02:58De ReactRouterDom.
03:00On est bien.
03:01Je m'importe ce dont j'ai besoin.
03:04Donc, le A Layout.
03:10Hop.
03:12Ainsi que Dashboard.
03:15De.
03:16Hop.
03:18Pages.
03:19Slash.
03:20Admin.
03:22Et donc, je vais me router tout ce bazar.
03:26Alors, c'est parti.
03:28Route.
03:29On va bien évidemment traverser un Layout.
03:33Donc, route path égale.
03:39Admin.
03:43Bon, je vais mettre slash admin.
03:44C'est bien.
03:46Element égale.
03:47Hop.
03:48Donc là, c'est mon A Layout.
03:53Il faut que ce soit des routes enfants.
03:56Voilà.
03:57Et donc, sur le path.
04:01Sur le path.
04:06Oh.
04:08Le path dashboard.
04:10Je suis bête.
04:12Hop.
04:12Dashboard.
04:14Element.
04:16Hop.
04:18La dashboard.
04:20On ferme ici.
04:22Je ferme mon accolade.
04:24Qu'est-ce qu'il m'a fait ?
04:26C'est très malin, ça.
04:29Donc, je ferme l'accolade et je ferme ma bali.
04:31Mais, il me...
04:32Hein ?
04:33Il en veut, hein ?
04:35Hop là.
04:36Qu'est-ce que j'ai mal...
04:38Dispatch ?
04:39Mais non.
04:42Dashboard.
04:43Tu m'enlèves ça.
04:44Voilà.
04:46Ah, quand il ne veut pas, hein ?
04:48Donc, on va faire un truc très simple, voilà.
04:49Et bien sûr, je n'oublie pas que dans mon Layout Admin,
04:55Hop.
04:57Il y a le Outlet.
05:00Sinon, mes routes enfants ne vont pas s'afficher.
05:02Au même titre que mon Layout Public,
05:05qui était ici.
05:07Très bien.
05:10Donc, j'ai mon routeur Admin ici.
05:15Hop, je ferme ça.
05:16Donc, voilà, il est là.
05:17Et moi, ce que je veux, c'est simplement le brancher.
05:20Et vous allez voir que là, c'est le drame, comme dit l'autre.
05:24Je vais dans mon app,
05:26et par réflexe, on pourrait se dire,
05:29ben...
05:30Admin routeur.
05:32On va faire comme ça.
05:34Il compile.
05:35Bon, lui, il nous dit, c'est cool, ça marche, impeccable.
05:38Et puis, alors là,
05:40alors là,
05:41alors là.
05:43Là, il y a tout qui part en squeeze.
05:45Et si je fais Admin Dashboard,
05:51alors, j'ai l'erreur 404,
05:53qui vient se coller là.
05:55L'erreur 404, c'est celle du...
05:58c'est celle du routeur public,
05:59puisque le routeur public est en devant.
06:05je reprends mon app.
06:06Le routeur public, il est là.
06:11Et puis, il se met devant.
06:13Donc, forcément, comme dans mon routeur public,
06:16jusqu'ici, il n'y a rien qui correspond.
06:18Alors, c'est lui qui part en premier.
06:19Il n'y a rien qui correspond au niveau de mes routes
06:24slash admin slash...
06:28slash...
06:28je vais y arriver, hein ?
06:32slash dashboard.
06:34Bah, lui, il déclenche ça.
06:35Puis après, il fait le deuxième bloc de route.
06:37Ce qu'il faut bien comprendre, c'est que
06:39c'est comme si vous aviez
06:40deux blocs route l'un derrière l'autre.
06:42Alors, je vais essayer de le...
06:44de le simuler.
06:48Là, une fois que tout est branché,
06:49c'est comme si vous aviez ça.
06:53Voilà.
06:54Oui, je sais, t'aimes pas.
06:56Mais c'est comme ça,
06:57je montre un truc, tu vas attendre deux secondes.
07:00Hop.
07:03Et...
07:03Hop.
07:04Voilà.
07:05Donc, c'est comme si nous avions
07:06deux blocs route en même temps.
07:08Donc, le routeur, lui, il fait son taf.
07:11Il passe dans le premier bloc.
07:13OK, c'est du slash.
07:14Moi, ça me correspond à peu près.
07:15Est-ce que c'est du home ? Non.
07:17Du service ? Non.
07:18Du contact ? Non.
07:19Bon, bah, c'est la route magique.
07:21Et puis après, lui, il fait le deuxième bloc.
07:24Est-ce que c'est slash admin ?
07:25Ah bah ouais, ça, ça marche.
07:27Est-ce que c'est dashboard ?
07:28Bah, c'est cool, ça marche aussi.
07:30Bah oui.
07:30Donc, on a traversé nos deux blocs routes.
07:33Et bah, du coup, j'ai le 404 du public.
07:37Et j'ai l'admin layout qui se déclenche tout ce qui est de plus standard.
07:42Et en plus, on a un souci, c'est qu'il arrive pas à me trouver la route correspondante.
07:46Parce que dans l'admin layout, à moins que je ne l'ai pas enregistré, si, j'ai l'outlet.
07:52Donc, il devrait me faire ce truc-là.
07:56Bah, il ne sait pas le faire.
07:58Donc, pour faire ça, il va falloir travailler autrement.
08:01Il va d'ailleurs falloir modifier tout.
08:05Enfin, tout.
08:06Il va falloir modifier des routes.
08:09Alors, il y avait un autre réflexe qu'on aurait pu avoir, c'est de se dire, bah, si j
08:15'enlève les routes là, parce qu'en fait, c'est parce que j'ai deux blocs routes, au final.
08:19D'ailleurs, on va le faire.
08:21Si j'enlève routes, ici, là, hop, tac, et tac, donc je commente, ici, et là, je commente, donc si
08:36j'enlève les deux blocs routes, et qu'au final, bah, je les rajoute ici.
08:41C'est-à-dire, comme ça, j'en ai plus qu'un seul de blocs routes.
08:46Hop, tac, tac, tac.
08:48Tac, j'indente correctement.
08:53ReactRouterDome, je me ramène routes.
08:58Voilà.
08:59Donc, il y a des warnings, ok, c'est cool.
09:01Alors là, c'est la fête à neneux.
09:03Alors là, c'est pire que tout.
09:06On a le fameux, alors c'est une erreur connue avec le routeur V6, hein.
09:11PublicRouter n'est pas un composant de route.
09:14Tous les composants enfants de route doivent être.
09:18Soit du route, soit du ReactFragment.
09:20Alors là, on se dit, mais attends, attends, attends, attends, attends, je renvois bien un route, là.
09:25Ben non, dans le V6, ça ne marche pas comme ça.
09:28Il faut faire autrement.
09:29Il faut bien laisser route, ici.
09:33Ça, c'est clair.
09:34Par contre, il faut appeler nos routeurs différemment.
09:42Alors, j'ai essayé de faire un truc.
09:45Ça ne va pas être jojo.
09:47Le publicRouter, je ne peux pas l'intégrer directement comme ça.
09:51Par contre, lui, il lui faut quand même la balise route.
09:57C'est quand même bien un bloc de route.
10:02Un bloc de routage.
10:03Même si j'ai une seule route principale et des routes enfants,
10:07c'est comme ça que ça fonctionne.
10:10Hop, hop, et voilà.
10:13Ça, il me le faut.
10:16Maintenant, je ne peux pas appeler directement mon routeur comme ça.
10:19Il faut que je lui attribue, si vous voulez, un point d'entrée.
10:23C'est surtout comme ça que ça fonctionne.
10:25Et c'est là, donc, qu'on arrive à l'autre façon de faire de la route enfant.
10:32Hop, donc, ici, route, j'enlève ceci, j'enlève cela.
10:45Donc, fur le paf, on va se dire, à la racine.
10:51Je vais me tanker, donc, l'élément, hop, non, accolade, tac,
11:00accolade, je ferme et boum.
11:03Je n'ai pas route, donc, je me le mets ici.
11:08Et sur la route, paf, égale, slash, admin,
11:16hop, element, égale, donc, l'admin routeur, je ferme, tac, et tac.
11:23OK.
11:23Là, déjà, ça râle beaucoup moins.
11:25Ça inclut quand même que derrière, je n'ai plus besoin dans mes layouts
11:29de définir les paths.
11:30Donc, dans l'admin routeur, j'enlève le path.
11:33Et dans le public routeur, j'enlève ça aussi.
11:36Je lui dis simplement de traverser un layout.
11:42Et voilà comment on y arrive.
11:43Alors, on n'a pas complètement fini, parce que là, il nous dit, il va nous le dire d'ailleurs
11:47très clairement, il le disait plus proprement d'ailleurs.
11:53Hop là, entrée, alors, on ne va pas faire comme ça, on va faire le point d'entrée,
11:59il nous le dit, voilà.
12:01Alors, il nous dit quoi ? Il nous dit, on est en train, alors ça fonctionne, il n'y a
12:06pas de, et encore des fois, non, il panique quand même un peu.
12:10Il nous dit, bon, tu as fait des routes enfants, descendantes, ils appellent ça des routes
12:15descendantes, ou tu as appelé useRoute, et déjà c'est sympa, le routeur, il ne sait
12:22pas trop ce qu'on fait.
12:23Bon, pourquoi pas ? Donc, à la racine, à travers la route passe slash.
12:31Mais, on a un parent qui n'a pas de, la wildcard étoile, qui veut dire toutes les routes
12:38qui vont en découler.
12:40Alors, s'il te plaît, tu me changes route path par étoile, ou un slash étoile.
12:46Moi, j'ai préféré le slash étoile.
12:48En fait, il faut lui préciser ici qu'il va avoir d'autres routes.
12:52routes, et c'est la même chose derrière, voilà.
12:56Quand on fait des routes enfants comme ça, pas entourés comme ceci, là, quand on fait
13:03des routes enfants comme ça, on met l'étoile derrière pour expliquer au routeur qu'il
13:07y a donc de l'enfant, il y a du routage derrière.
13:12On va recompiler.
13:16Je rafraîchis.
13:17Normalement, voilà, vous voyez qu'ici, il fonctionne impeccable.
13:22Et si je me cogne un admin dashboard, j'ai mon layout admin, par contre, j'ai pas admin.
13:31Pourquoi j'ai pas admin ?
13:34Donc il a bien compris le truc, je suis bien là, mon layout, il a bien le outlet, pourquoi
13:42qui, pourquoi que, qui, que, quoi, bien sûr.
13:49Alors, à moins qu'il y a un truc que j'ai pas fait gaffe, body, route, app, admin layout.
13:59Ah ben d'accord, c'est parce que j'ai rien dedans.
14:01Pfff, abruti.
14:03Ok.
14:06Alors, dashboard.
14:10Coucou, là, dashboard.
14:13Je te jure.
14:15Voilà.
14:17Bon, comme cette vidéo dure un peu longtemps, on va s'arrêter là.
14:21Là, c'est déjà l'explication pour brancher plusieurs systèmes de routage à l'intérieur
14:27de notre routeur, on va dire, principal.
14:30Encore une fois, app, pour moi, c'est le routeur principal.
14:33Et puis, hop, j'ai du routeur public, ici, et un routeur admin.
14:41Et à chaque fois, je suis quand même, pour convenir au routeur V6, de lui accrocher,
14:48on va dire, un point d'entrée.
14:49Et parce qu'il connaît le point d'entrée, il va pouvoir nous laisser amener nos différents
14:54routeurs.
14:54Et bien évidemment, il ne faut pas oublier le point d'exclamation, bien sûr, l'astérisque,
15:01donc l'étoile, pour indiquer au routeur que derrière, on a encore de l'enfant.
15:06Voilà.
15:07Donc, c'est la fin de cette vidéo, la mise en place de ce routeur à routage multiple,
15:12on va dire ça comme ça.
15:13Dans la prochaine, on va réellement faire le routage de la partie admin.
Commentaires