Pourquoi mon routeur React ne fonctionne-t-il pas après une actualisation de page ou une saisie manuelle d'URL ?

Gérer les URL dans React-router

Les URL ne fonctionnent pas lors de l'actualisation ou de la saisie manuelle

Lors de l'utilisation de React-Router, il y a une distinction entre le routage côté serveur et côté client. En règle générale, votre application commence par envoyer une demande initiale au serveur pour un fichier HTML statique contenant les scripts React. Une fois chargé, le client gère les modifications d'URL ultérieures, sans faire de nouvelles requêtes au serveur.

Le problème : Lorsque vous actualisez ou saisissez manuellement une URL qui correspond à une route côté serveur (par ex. , /joblist) en mode de routage côté client, la vue souhaitée ne sera pas affichée. Au lieu de cela, vous pourriez rencontrer une erreur « Impossible GET /joblist ».

Routage côté serveur ou côté client

Côté serveur : Le serveur gère toutes les URL routage. Dans un site HTML statique, le serveur enverrait une page HTML pour l'URL spécifique, telle que /joblist.

Routage côté client : React-Router gère le routage des URL côté client . Au lieu de demander une nouvelle page au serveur, il met à jour dynamiquement le contenu affiché en fonction du changement d'URL.

Résoudre le problème

Pour résoudre ce problème, vous devez établir des routes sur le serveur et côté client. Voici les manières possibles de le faire :

Historique de hachage (prédécesseur de l'historique du navigateur)

Cette approche utilise des URL avec un préfixe de hachage (#), comme /joblist#/about. La partie après le hachage n'est pas envoyée au serveur, donc le serveur voit toujours l'URL racine (/). Côté client, React-Router gère la partie #/about.

Inconvénients :

• URL peu attrayantes
• Aucun rendu côté serveur , ayant un impact négatif SEO.

Catch-All

Mettre en place un itinéraire fourre-tout sur le serveur. Par exemple, si le serveur reçoit une URL qui ne correspond pas à un itinéraire spécifique, il envoie le fichier index.html. Cela garantit que quelle que soit l'URL saisie, l'application React se charge.

Inconvénients :

• Configuration plus complexe
• Référencement sous-optimal , car toutes les pages renvoient la même chose contenu.

Hybride

Cette approche combine le fourre-tout avec des routes spécifiques côté serveur pour les pages importantes. Vous pouvez fournir des fichiers HTML statiques pour ces pages, rendant leur contenu disponible aux moteurs de recherche.

Inconvénients :

• Configuration plus complexe
• Avantages SEO limités
• Duplication de code (rendu du contenu à la fois sur le client et serveur).

Isomorphique

Dans cette approche, le serveur et le client exécutent le même code JavaScript. Cela résout le problème en envoyant le même balisage au client, que la transition de page se produise côté serveur ou côté client.

Inconvénients :

• Le serveur doit exécuter JavaScript (souvent Node.js)
• Défis environnementaux
• Courbe d'apprentissage abrupte

Choisir la bonne solution

Considérez ce qui suit facteurs :

• Simplicité : Catch-all est une configuration relativement simple.
• SEO : Isomorphic est la solution optimale pour le référencement, mais cela demande plus d'efforts.
• Technologie du serveur : Si votre serveur fonctionne sur Node.js, isomorphique est un choix approprié.

En fin de compte, la meilleure option pour vous dépend de vos exigences spécifiques et de vos capacités techniques.

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!