00:00Bonjour à tous et bienvenue dans cette vidéo où nous allons nous occuper de router nos pages publiques,
00:05de faire le routage de notre applicatif.
00:08Jusque là, on avait créé nos composants, composants qu'on a mis par convention dans le dossier page,
00:15et puis on les avait directement intégrés, greffés dans l'app.
00:22L'app, comme beaucoup de framework, d'ailleurs si vous suivez mes autres séries,
00:28comme ce sont mes fichiers de démarrage, comme l'index, je leur fiche l'app, j'écris très peu de
00:33choses à l'intérieur.
00:36Et donc ici, ce que je veux faire c'est du routage.
00:40Pour le coup, on va s'en occuper directement dans notre app pour commencer,
00:46mais vous verrez qu'à la fin, on va faire quelque chose de beaucoup plus propre.
00:51Alors, ici, je vais dégager tout ça.
00:55Ça, j'en ai pas besoin, le header ici, j'en ai pas besoin, je démarre là.
01:01Alors, quand vous supprimez des éléments, évidemment il y a des imports qui ne sont plus nécessaires.
01:06Mais de fait, le linter vous dit, t'es gentil, mais ça c'est pas du code propre.
01:12Je vous rappelle que le S-Link est là pour nous aider à faire du code propre.
01:17Ton logo, tu as défini, mais tu ne l'utilises pas.
01:19Grosso modo, t'es gentil, tu l'enlèves.
01:22Ah bah si, ça peut lui faire plaisir.
01:24Moi, j'ai quand même le commenté.
01:26Voilà, il est content, je vous jure.
01:30Donc, pour faire du routage, qu'on soit bien d'accord, j'ai besoin du routeur.
01:36Routeur qui n'est pas présent.
01:39Ici, je n'ai pas le React Router DOM.
01:42Il me le faut.
01:45npm install react-router-dom.
01:50Alors, avant, il était nécessaire d'utiliser aussi un couple de paquets, react-router et react-router-dom.
01:58Et bien, ce n'est plus nécessaire.
02:01Donc, je n'installe que ce paquet-là.
02:05Impeccable.
02:06Je l'ai à disposition.
02:10Ce routeur, ou ce paquet, il a un module qui nous permet de faire comprendre au système,
02:21de faire comprendre au DOM, qu'on a un routage.
02:26Alors, l'idée, en général, c'est de brancher le browser-router, et d'y définir nos routes à l
02:40'intérieur.
02:41Pour avoir quelque chose de pratique, là, je vais le commencer comme ça.
02:45Mais dites-vous bien qu'après, ça aussi, ça va être nettoyé et mis proprement.
02:52A l'intérieur du browser-router, on a des routes, avec un S.
03:01Vous voyez qu'à chaque fois, tout ça, ça vient du React Router DOM.
03:06A l'intérieur de ces routes, j'ai des routes.
03:10Merveilleux, hein ?
03:11Et là, au singulier.
03:14OK.
03:15Donc là, c'est une balise orpheline.
03:17Et j'y vais.
03:18Je vais donc définir que, sur le path « slash home », donc ma page index,
03:26je vais utiliser l'élément « home », et je ferme mon accolade.
03:37Voilà.
03:37Aujourd'hui, ça se fait comme ça.
03:38Il y avait avant « component », il y avait différentes façons d'écrire.
03:43Bon, ben, je vous l'a fait à la React 18, ou à la dernière version utilisée.
03:49Il s'écrit comme ça.
03:51J'enlève ça, et puis je vais me copier ça.
03:56Donc, ensuite, on a le pass « service », et ensuite, on a « contact ».
04:06Donc là, évidemment, ça appelle le composant « service », et ici, ça m'appelle le composant « contact ».
04:14Pourquoi tu veux le réimporter ?
04:16Il est déjà là.
04:18C'est complètement idiot.
04:20Hop.
04:21Voilà.
04:23Tac.
04:25Donc, grosso modo, ici, vous avez quasiment le render du routeur.
04:31Et grâce aux routes qui sont définies ici, le routeur va de lui-même injecter un composant ou un autre.
04:38Alors, on va tester ça de suite.
04:42« Run start to ».
04:45Ou « Graco start », c'est comme vous voulez.
04:48Alors, il est bien de le laisser démarrer, parce qu'en fait, à chaque fois que vous le démarrez,
04:54il vous ouvre un autre navigateur, etc., etc.
04:57Donc, je vais le laisser démarrer, j'ouvrirai une autre console après.
05:00Bon, ben là, forcément, comme je l'avais arrêté, c'est festif.
05:04Voilà.
05:06Il a redémarré, et ici, on ne voit rien.
05:08D'ailleurs, le routeur en dessous, là, je vais essayer de zoomer.
05:14Il nous le dit, je ne trouve pas la route.
05:18Bon, c'est normal, il n'y a pas de route « slash », on ne l'a pas définie.
05:21Cela dit, si je fais « slash home », j'ai mon « home works » qui fonctionne ici.
05:28Si je fais « service », « impeccable », et si je fais « contact », « impeccable », j
05:42'ai mon composant « contact ».
05:43Ça y est, le système le rend.
05:45Bon, par contre, il y a deux choses qui vont nous manquer.
05:49Si j'écris n'importe quoi,
05:52ben, je n'ai plus rien,
05:54rien qui s'affiche, et en plus, donc, j'ai, dans la console, le message « je ne comprends pas
05:59cette route ».
06:00Bon, ça, c'est logique.
06:02Mais, évidemment, qu'on ne va pas le laisser comme ça,
06:05et qu'on va faire, entre guillemets,
06:08ben, la route de fin.
06:10Alors, je prends mon système.
06:14Je vais me faire un nouveau composant.
06:20Allez, dans le dossier « underscore utile »,
06:22parce que c'est quand même des petits fichiers...
06:27moi-ci, allez, hop, « underscore utile »,
06:30c'est un du classique syndical,
06:31tout ce qui n'est pas forcément
06:35de l'affichage,
06:36mais qui est utile pour le fonctionnement.
06:38Et je vais me faire le composant,
06:40la page « error ».
06:43RSC,
06:45bam,
06:47« error 404 ».
06:49On va faire comme ça,
06:50même si ça n'en est pas forcément une,
06:52enfin, au sens strict du terme.
06:55Et donc, ici,
06:57donc, mon error,
06:58il est dans mon utile, ça.
07:01Hop,
07:02je prends « root »,
07:05« path »,
07:07« étoile »,
07:11« elements »,
07:13pour côté, elle est à la fin,
07:14« égale »,
07:15« error ».
07:18Donc là, hop,
07:19on va chercher celui qui est dans utile.
07:23on ferme,
07:24et on n'oublie pas de fermer notre route.
07:26Ici, de suite,
07:27on en profite « arrobas ».
07:28Comme ça, c'est fait.
07:31Il y a un « s » quelque part.
07:33Qu'est-ce que j'ai fait ?
07:40Qu'est-ce que quoi donc ?
07:41Ben oui, il y a un « s » ici qui ne rime à rien.
07:44Hop là.
07:45Ok.
07:48Si on prend le fonctionnement même de notre routeur,
07:50comme tous les autres routeurs,
07:52on ne se prend pas la tête là-dessus.
07:56Ici,
07:58quand le routeur nous voit arriver,
08:00il prend une route.
08:00Enfin, il va dérouler ses routes.
08:02Est-ce que ça correspond à ça ?
08:03Non.
08:04Est-ce que ça correspond à ça ?
08:05Non.
08:07Est-ce que ça correspond à ça ?
08:08Non.
08:10Est-ce que ça correspond à ça ?
08:11Oui, de toute façon, dans tous les cas,
08:12ça correspondra toujours.
08:14Ça, c'est la route qui s'exécute quoi qu'il arrive.
08:16Parce que dès qu'il en trouve une ici,
08:18il s'arrête.
08:19J'ai ma correspondance,
08:21j'affiche le composant,
08:22j'arrête de travailler.
08:25Dans tous les cas,
08:26s'il parcourt toutes les routes ici,
08:27ça veut dire qu'il n'a rien trouvé.
08:29Et donc, il faudra exécuter celle-ci.
08:32On va regarder ça de suite.
08:34Eh bien, j'ai bien mon erreur 404.
08:36Je peux mettre absolument tout ce que je veux.
08:39Ça me fera une erreur 404.
08:42Donc derrière, je peux revenir à Home.
08:46Impeccable.
08:47Alors, qu'on soit aussi bien d'accord sur le principe.
08:51C'est-à-dire que si un jour, vous me faites ça,
08:56que vous mettez Contact après le pass magique,
08:59vous ne pourrez plus jamais aller dans Contact.
09:04Service, ça marche.
09:08Contact.
09:10Oh mince !
09:11Ah mince !
09:12Il est plus intelligent aujourd'hui.
09:13Avant, il ne le faisait pas.
09:15Tiens.
09:16Allez, petite modif.
09:17C'est-à-dire qu'avant,
09:18quand il parcourait bêtement le truc,
09:21ici, il trouvait une route magique
09:23qui correspondait.
09:25Du coup, lui,
09:27il va quand même exécuter celle-là,
09:29même s'il y a celle-là d'abord.
09:31Eh bien, le nouveau routeur,
09:33il est intelligent, dis donc.
09:33Bon, ça change.
09:35Bon, je remets quand même les routes au bon endroit.
09:39Et dernier petit problème.
09:42Enfin, petit problème, ce n'en est pas.
09:44Parce que si j'arrive sur ma page d'accueil,
09:48bon, là, du coup, j'ai une erreur 404
09:50puisque je n'ai pas de correspondance
09:52pour le rien du tout.
09:55Alors, ce que je vais faire, en fait,
09:57je vais définir l'index,
10:00justement, la route par défaut.
10:03Je reprends mon IDE.
10:07Et vous allez voir ici,
10:09hop,
10:09j'aime bien faire des séparations propres.
10:13Route.
10:14Eh bien, la route index,
10:16au final, c'est l'élément
10:19homme.
10:22Tac.
10:23Hop, on ferme ça
10:24et on ferme ça.
10:26À partir de ce moment-là,
10:28même si je n'ai rien derrière,
10:30j'ai bien mon homme.
10:31Alors, le homme fonctionne après,
10:33il n'y a pas de problème.
10:35Mais ça, ça permet de définir
10:37quelle est la page par défaut
10:40de votre site.
10:41Comme ça, vous n'avez rien
10:42qui tombe par terre.
10:45Et donc, du coup,
10:47on a défini ici nos routes
10:51et on peut directement naviguer.
10:54Alors, évidemment,
10:54le problème, c'est que pour l'instant,
10:57je ne fais que changer
11:03mon URL
11:04et puis toute ma page se recharge.
11:06Évidemment que ce n'est pas ça
11:07le plus intéressant.
11:08Donc, du coup,
11:09il va falloir s'occuper
11:10de mettre en place
11:11un autre système.
11:12Alors, rien de bien méchant,
11:13ce n'est que la barre de navigation.
11:15La barre de navigation,
11:17on va s'en occuper
11:19juste là,
11:20juste après,
11:20dans la prochaine vidéo,
11:21puisqu'on va créer
11:22un composant,
11:23greffer tout ça
11:24dans la page,
11:25etc.
11:28Prochaine vidéo, donc.
11:29On va se faire
11:31un petit composant header
11:32pour se greffer ça
11:33sur nos pages
11:34et avoir notre menu.
11:35Sous-titrage Société Radio-Canada
Commentaires