React Router avancé :: projet développement d'application web

Routes et layouts

Mon, 01 Jan 0001 00:00:00 +0000

Dans le code actuel, chaque page est indépendante. Si vous regardez le composant , vous remarquez que le

et le

Récupération de données (loaders)

Mon, 01 Jan 0001 00:00:00 +0000

Dans cette section, nous allons voir comment récupérer des données (requête GET) de notre backend et les afficher dans notre frontend. Création d’un service API La première étape est d’implémenter les fonctions fetch qui nous permettront de faire les requêtes nécessaires aux backend pour récupérer les données. Plutôt que d’écrire des fetch éparpillés partout, une bonne pratique est de créer un service d’API qui contient toutes les fonctions. Contenu du fichier /services/api.js :

Envoi de données (actions)

Mon, 01 Jan 0001 00:00:00 +0000

Alors que les Loaders servent à récupérer des données (GET), les Actions servent à en envoyer (POST, PUT, DELETE). C’est la méthode “moderne” de gérer les formulaires sans useState. Formulaire de connexion 1. Créer la fonction loginAction Cette fonction traite les données du formulaire et communique avec le backend. // actions/login.action.js import { redirect } from "react-router-dom"; import { loginUser } from "/src/services/api"; export async function loginAction({ request }) { // 1. On extrait les données du formulaire envoyé par le composant

Routes protégées

Mon, 01 Jan 0001 00:00:00 +0000

Dans certaines cas, on voudrait que certaines pages de notre application ne puissent être accessible qu’à un utilisateur connecté (par exemple la page Dashboard). Avec React en Data Mode, on peut tout à fait le faire en mettant en place un “garde” (Guard) qui s’exécute au niveau du loader avant d’afficher la page. Fonction utilitaire requireAuth Cette fonction est un middleware côté client : elle vérifie si l’utilisateur est connecté et, sinon, le redirige intelligemment.

Expérience utilisateur (UX)

Mon, 01 Jan 0001 00:00:00 +0000

Dans cette section, nous allons voir comment améliorer l’expérience utilisateur, d’abord en utilisant des Query String (ce qui se trouve après le ? dans l’URL) pour faire circuler des informations entre deux pages, puis en explorant le composant de React Router. Utilité Imaginez ce scénario : L’utilisateur navigue directement sur son Dashboard. Votre code détecte qu’il n’est pas connecté. Vous le redirigez vers /login. Problème : Une fois connecté, il atterrit sur l’accueil. Il a perdu sa destination initiale. La solution : “Transporter” l’intention de l’utilisateur dans l’URL. 1 - Envoyer les infos (requireAuth) On modifie notre garde pour qu’il construise une URL de redirection “enrichie”.

Pour aller plus loin

Mon, 01 Jan 0001 00:00:00 +0000

Gestion des états de chargement et des erreurs Dans une application classique, si une API plante, l’écran devient souvent blanc ou reste bloqué. Avec React Router, on peut définir des “filets de sécurité” à différents niveaux de l’arborescence. Le HydrateFallback (chargement initial) Lorsque l’utilisateur arrive sur l’application pour la première fois et que le premier loader prend du temps, le HydrateFallback permet d’afficher un indicateur de chargement global pendant que l’application “s’hydrate” (se charge en mémoire).