Configurer React Router sur Hostinger
Lors du déploiement d'une application React utilisant React Router sur Hostinger, il est courant de rencontrer des problèmes de navigation. Ces problèmes proviennent souvent de l'absence de configuration côté serveur pour gérer les routes client. Ce guide détaille les étapes nécessaires pour une configuration réussie.
Étape 1 : Création d'un fichier .htaccess
Pour que votre serveur redirige correctement toutes les requêtes vers index.html, créez un fichier nommé .htaccess dans le dossier public de votre projet React. Ajoutez le code suivant dans ce fichier :
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>Ce fichier garantit que toutes les requêtes non associées à des fichiers ou dossiers existants seront redirigées vers index.html, ce qui est essentiel pour React Router.
Étape 2 : Compilation de l'application
Une fois votre fichier .htaccess prêt, compilez votre application en mode production en utilisant npm run build ou yarn build.
Cela génère un dossier build contenant une version optimisée de votre application prête pour le déploiement.
Étape 3 : Déploiement sur Hostinger
Connectez-vous à votre hébergement Hostinger et téléchargez le contenu du dossier build dans le répertoire racine de votre site web ou dans un sous-domaine.
Une fois cette opération terminée, votre application sera en ligne et la navigation via React Router fonctionnera correctement.
Conclusion
En suivant ces étapes, vous vous assurez que votre application React fonctionne sans problème sur Hostinger. Cette méthode est simple, efficace et adaptée aux projets modernes.
