Problème de navigation des sous-pages sur GitHub Pages avec React Router

[rawanst]

Contexte :

• Le site est développé avec React et utilise React Router pour la gestion des routes.
• Le déploiement est effectué sur GitHub Pages via la branche gh-pages et tout fonctionne correctement sur la page d'accueil.
• Cependant, lorsque j'essaie d'accéder directement à certaines sous-pages comme /blog ou /portfolio, cela déclenche une erreur 404 - Page Not Found.

GitHub Pages tente de rechercher des fichiers statiques pour les routes spécifiques (par exemple, /blog ou /portfolio), ce qui est incompatible avec la gestion dynamique des routes côté client par React Router. Le problème se produit uniquement lorsqu'on tente d'accéder à ces sous-pages directement via l'URL dans le navigateur. En revanche, la navigation interne fonctionne correctement à partir de la page d'accueil.

J'utilise createBrowserRouter dans index.js pour configurer les routes dans l'application. Il semble que GitHub Pages ne gère pas les routes définies côté client, et chaque sous-page tente de rechercher un fichier statique correspondant.

Première solution envisager

• Configurer un basename dans le createBrowserRouter pour prendre en compte l’URL GitHub Pages.
• Ajouter une page NotFound pour gérer l'erreur 404 à l'avenir

Prévision pour une solution alternative

Utiliser BrowserRouter de manière traditionnelle (sans les nouvelles fonctionnalités)

[rawanst]

Solution finale:

• Utiliser createHashRouter au lieu de BrowserRouter from 'react-router-dom' dans index.js car Github Pages ne supporte pas BrowserRouter
• Particularité du HasRouter dans les routes qu'on peux appeler
  • si on utilise href, ne pas oublier le #
  • => <a href="#/endpoint"></a> au lieu de <a href="/endpoint"></a>
  • si on utilise navigate, ne pas commencer par '/'
  • => () => navigate('home') au lieu de () => navigate('/home')

La solution à été trouver via ce lien: https://stackoverflow.com/questions/71984401/react-router-not-working-with-github-pages