00:00Bonjour à tous et bienvenue dans cette vidéo où nous allons optimiser un petit peu notre routage
00:07qui va devenir au fur et à mesure un peu plus complexe.
00:10Je vous rappelle que la dernière fois on était arrivé à mettre un layout public
00:15et puis si on regarde un petit peu notre crobar, on sait inévitablement qu'on aura un layout admin.
00:20Donc vu qu'on va passer en deux parties, un public et un admin,
00:25on va déjà ranger nos fichiers parce que ça va devenir assez important de faire quelque chose
00:29encore une fois de maintenable, de plus propre.
00:33Là pour l'instant j'ai des composants publics, j'ai un utile pour l'erreur et puis j'ai
00:36toutes mes pages ici.
00:38Ce n'est pas super propre.
00:40Alors dans mes pages, d'entrée de jeu, je vais me faire un dossier public
00:45et d'entrée de jeu, je vais me faire un dossier admin.
00:49Ça c'est pour la suite.
00:51Dans tout ce qui est public, inévitablement, vous vous en doutez, je vais y mettre mes pages.
00:59Oui, on bouge tout ça.
01:02Donc évidemment lui commence à se dire, oh là là, mais je n'ai plus mes routes, etc.
01:06Il se passe quoi ?
01:08Panique absolue, tes imports sont foirés, blablabla.
01:11Écoute mon petit compiler, je fais ce que je veux.
01:13Alors, hop, on va corriger tout ça.
01:19Donc, avant de corriger ce bousin, donc là je peux fermer mes pages, hop là, hop là.
01:26Ce qu'on va faire, c'est directement se créer un nouveau routeur.
01:32Alors, un fichier de routage.
01:34Et vous allez comprendre le bousin.
01:37Dans ma partie publique, je vais faire le fichier public route.js.
01:46Ok.
01:47C'est un composant, puisque tout n'est que composant.
01:51Voilà.
01:52On a notre public route.
01:54Et au final, ce que je vais retourner, c'est mon routage public.
02:00Je prends tout ça.
02:04Hop.
02:05Alors, évidemment, il va...
02:06Ah, j'ai oublié un truc.
02:08Euh, oui.
02:11Qu'est-ce que c'est que ce slash route ?
02:12Ah oui, c'est le route du layout.
02:14Je suis débile.
02:16Hop là.
02:17Tac.
02:17J'enlève ça.
02:19Bon, évidemment, il va râler.
02:20Ouin, blablabla.
02:21Il n'y a plus tes composants.
02:22C'est une catastrophe.
02:25Joie, guettez, bonheur.
02:26Hop là.
02:29Du coup, ça, on ne l'utilise plus non plus pour l'instant.
02:32Voilà.
02:33Là, je retrouve un fichier APP propre.
02:36Et c'est ici qu'on va jouer.
02:39Hop.
02:40Donc, je remets mes routes.
02:42Je vais collapser un peu ce truc-là.
02:44Voilà.
02:46Je vais ici.
02:48Donc, j'ai remis mes routes ici.
02:51Impeccable.
02:53Et au final, j'exporte simplement mes routes.
02:57Public.
02:59Pas de souci.
03:00Alors, hop.
03:01Mes routes publiques, je reprends tout le cheminement classique.
03:05Par contre, je n'ai pas mes imports.
03:08Ça risque de péter.
03:09Mais ça, on va voir après.
03:12Donc, dans mon APP, maintenant, il faut que j'inclue mon routage entre guillemets public.
03:18Tout simplement.
03:21Alors, tout ce qui est mécanique, je vais me le laisser là.
03:25Et je vais me faire un import.
03:30Oh, bah tiens, on va voir s'il le comprend.
03:33Ici.
03:35Pardon.
03:38Public.
03:39Route.
03:40Voilà.
03:42Je mets ça ici.
03:44Hop.
03:45On est gentil.
03:45On reste en arrow base.
03:46Alors, évidemment, là, maintenant, il me dit, ah, bah, t'as pas défini, t'as pas défini, t'as pas
03:50défini.
03:50Ouais, je sais que j'ai pas défini.
03:52J'arrive.
03:56Donc, import.
03:57Là, je reviens dans mon routage public.
04:01Route.
04:03Route.
04:04Voilà.
04:08From React.
04:10Route.
04:10D'homme.
04:12Et puis, évidemment, il faut que j'importe tout ça.
04:17Donc, import.
04:21Home.
04:22From.
04:23C'est parti.
04:24Donc, on est dans.
04:28Pardon.
04:30Slash.
04:31Page.
04:32Public.
04:33Home.
04:35Et puis, on va simplement se prendre tout ça.
04:41Donc, tac.
04:43Tac.
04:45Ici, c'est service.
04:49Hop.
04:49Pardon.
04:50Ici.
04:51Et là.
04:54C'est contact.
04:55Et évidemment, ici, je n'oublie pas mon layout.
05:01From.
05:02Donc, arrobas.
05:03Page.
05:05Public.
05:06Slash.
05:06Layout.
05:07Youpl.
05:09Hop là.
05:12Qu'est-ce que tu n'aimes pas ?
05:17Error n'est pas défini.
05:18Ah bah oui, mais il me manque mon...
05:20Héhé.
05:21Hop.
05:22Import.
05:24Error.
05:25Error.
05:25From.
05:26From.
05:26Arrobas.
05:27Slash.
05:29Util.
05:30Slash.
05:31Ça doit être.
05:33Error.
05:34Voilà.
05:36Maintenant, qu'est-ce que tu me dis ?
05:39Que tu ne peux pas ?
05:42Pourquoi ?
05:44Ah, bah oui, il est majuscule.
05:47J'ai écrit public avec un P minuscule.
05:51Hop.
05:53Majuscule.
05:54Ah bah oui, ça te va mieux, forcément.
05:56Vous voyez, quand je vous disais qu'un P minuscule, ce n'est pas la même chose qu'un P
05:58majuscule.
06:00Ce n'est pas pour rien.
06:01Donc, je reprends.
06:02J'ai fait un dossier public.
06:05Dans le dossier public, j'ai mis toutes mes pages et mon layout public.
06:10Dans ce dossier, j'ai également fait le public routeur ou public route.
06:16A l'intérieur, donc, j'ai remis en place tout mon routage.
06:23Ce public route, vu qu'il est exporté, je me l'importe dans le browser routeur.
06:28Comme ça, le routeur sait de quoi on parle.
06:32Et normalement, alors là, évidemment, c'était avant.
06:35Ça a généré plein d'erreurs au début.
06:37Si vous voulez, je peux rafraîchir.
06:39Et normalement, voilà.
06:40J'ai mon service, j'ai mes contacts et tout fonctionne.
06:45Ce qui fait que dans mon app, ce que je vous disais, c'est ce que j'appelle mon fichier
06:51d'entrée,
06:53je mets quelque chose de très, très simple.
06:57Et dans mon public route, je définis le routage de la partie publique.
07:05Et uniquement cette partie.
07:07Comme ça, ça permet d'avoir quelque chose d'assez simple.
07:15Comme ça, encore une fois, c'est plus maintenable.
07:18On a quelque chose de plus propre.
07:20Et ça nous permet d'avoir des petits modules comme ça, simples.
07:26Encore une fois, si je ferme mon dossier public et que je vais dans la PPJS, je sais que je
07:30dois aller regarder public route.
07:33Donc typiquement mon dossier public.
07:37Alors, ça c'est bon.
07:38Mais là aussi, vous voyez qu'on commence à avoir un truc catastrophique au niveau des imports.
07:43Et puis plus on va avancer dans le temps, plus les imports vont être compliqués.
07:46Là aussi, on va faire dans la prochaine vidéo une petite astuce pour tout ce qui est import des composants
07:54d'une partie ou d'un système de routage.
Commentaires