Pourquoi les URL de mon routeur React se cassent-elles lors de l'actualisation ou de l'entrée directe ?

Les URL du routeur React échouent lors de l'actualisation ou de la saisie manuelle

Comprendre le routage côté serveur et côté client

Avec le routage côté client, les URL sont interprétées différemment. Initialement, les demandes vont au serveur. Après le chargement des scripts React Router, les modifications d'URL se produisent localement, déclenchant des transitions de page sans requêtes du serveur. Cependant, la saisie manuelle d'une URL ou le copier-coller d'un ami qui n'a pas chargé votre site Web déclenche des requêtes du serveur.

Routage côté serveur

Dans de tels cas, le serveur -un routage côté est nécessaire. Si le modèle d'URL souhaité (par exemple, http://example.com/about) doit fonctionner à la fois côté serveur et côté client, vous devez configurer les routes des deux côtés.

Solutions de contournement : Historique de hachage vs fourre-tout

• Historique de hachage : Utilise des modèles d'URL tels que http://example.com/#/about, qui restent sur le client et n'impactent pas les requêtes du serveur. Inconvénients : Les URL semblent moins souhaitables et aucun rendu côté serveur.
• Catch-all : Demande au serveur de transmettre toutes les requêtes (par exemple, /*) à un une seule page (par exemple, index.html). Inconvénients :Pas de référencement optimal et de duplication de code.

Approches hybrides et isomorphes

• Hybride : Développe le fourre-tout en créant des scripts spécifiques pour les itinéraires importants. Inconvénients : Complexité de configuration accrue, référencement limité et duplication de code.
• Isomorphique : Utilise Node.js sur le serveur pour exécuter le même code JavaScript que celui utilisé sur le client . Inconvénients : Nécessite Node.js sur le serveur, des défis de compatibilité environnementale et une courbe d'apprentissage abrupte.

Choisir la bonne solution

Sélectionnez la solution qui correspond à vos besoins. Si la complexité et le temps sont des contraintes, le fourre-tout est un point de départ acceptable. Pour les serveurs basés sur Node.js, le rendu isomorphe offre des avantages en matière de référencement mais nécessite plus d'efforts.

Ressources recommandées

• React Isomorphic Starterkit
• Exemple chaud universel de React Redux
• Créer React App

N'oubliez pas que pour un référencement optimal, le serveur doit envoyer le même balisage qui serait rendu côté client. En combinant efficacement le routage côté serveur et côté client, vous pouvez garantir que les URL de votre routeur React fonctionnent de manière transparente dans tous les scénarios.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!