React Router sur un hébergement PHP

Comme vous le savez déjà, après la construction, un projet React représente des fichiers statiques ordinaires, qui peuvent être téléchargés sur n'importe quel hébergement, et il fonctionnera immédiatement là-bas.

Il y a, cependant, un problème avec React Router. Le fait est que Router, pendant son fonctionnement, modifie l'URL des pages dans le navigateur. En même temps, la page ne se recharge pas réellement, seul l'URL change via JavaScript.

Sur un site déposé sur un hébergement, Router fonctionnera. Mais, si vous vous trouvez sur une page du site, autre que la page d'accueil, et que vous la rechargez, une erreur 404 apparaîtra.

Et c'est logique, car le navigateur cherchera un fichier à l'URL spécifiée, comme fonctionnent habituellement les sites statiques. Or, dans notre application, cette page n'existera pas, car nous ne faisons que simuler ces pages, alors qu'en réalité toute notre application fonctionne sur index.html.

Pour résoudre le problème, il faut faire en sorte que toutes les URL qui ne mènent pas à des fichiers réellement existants soient redirigées vers index.html. Cela se fait via les moyens du serveur web fonctionnant sur l'hébergement.

Les hébergements virtuels fonctionnent avec PHP. En général, le serveur utilisé est Apache. Un fichier spécial .htaccess y est disponible, avec lequel on peut définir une redirection.

Pour cela, vous devez placer dans la racine de votre site le fichier .htaccess avec le contenu suivant :

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Créez un projet avec React Router.

Téléchargez-le sur l'hébergement. Assurez-vous que par défaut le routage ne fonctionne pas.

Corrigez le problème à l'aide du fichier .htaccess.