web-dev-qa-db-fra.com

obtenir 404 pour les liens avec create-react-app déployé sur les pages github

J'essaie de déployer une application create-react sur un chemin relatif sur les pages GitHub avec un domaine personnalisé. Par exemple. www.example.com/myproject

J'utilise react-router-dom, react-router-redux et react-router-bootstrap

J'ai défini la page d'accueil sur http://www.example.com/myproject dans packages.json (a essayé homepage = "." aussi) et également configuré le nom de base de mon historique:

...
export const history = createHistory({ basename: '/myproject' });
const middleware = [thunk, routerMiddleware(history)];
...
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
const store = createStore(rootReducer, initialState, composedEnhancers);

L'application déployée fonctionne sur www.mydomain.com/myproject et je peux naviguer via les liens de l'application.

Mais j'ai eu 404 lorsque j'essaie d'entrer directement un chemin (par exemple. www.example.com/myproject/account) ou si je rafraîchis le navigateur sur une sous-page.

L'objectif à long terme est de configurer différents chemins relatifs pour les environnements de développement et de production, comme décrit dans cette réponse mais d'abord, je dois juste le faire fonctionner lors du déploiement.

react-routercreate-react-appreact-router-redux
10
szerte

Problème: l'URL est évaluée côté serveur

Lorsque vous entrez une nouvelle URL dans la barre d'adresse du navigateur ou actualisez la page, le navigateur demande au serveur (dans ce cas, le serveur de pages GitHub) pour cette URL. À ce stade, le routeur côté client (react-router) ne peut pas agir car il n'est pas encore chargé pour cette page. Le serveur recherche maintenant une route qui correspond à /accounts ne le trouvera pas (car le routage se fait côté client) et renvoie 404.

Solution

Si vous contrôliez le serveur, vous pouvez servir index.html pour toutes les routes. Ceci est expliqué dans la documentation de create react app servant des applications avec un routage côté client . Comme nous n'avons pas ce contrôle dans le cas des pages GitHub, nous pouvons les essayer.

Solution facile

Passer de browserHistory à hashHistory Avec ce changement, vos URL passeront de

www.example.com/myproject/account

à

www.example.com/myproject/#/account

C'est donc un peu compliqué.

Solution plus difficile

Obtenez les pages GitHub à rediriger vers index.html sur toutes les demandes. Fondamentalement, vous devez ajouter un 404.html dans votre répertoire de construction avec du code à rediriger vers index.html. Plus d'informations sur la façon de le faire .

Créer React App a documentation sur le routage côté client dans les pages GitHub aussi

15
sudo bangbang

La raison en est que le navigateur n'a peut-être pas encore mis en cache le code de routage, ce qui provoque une erreur 404 si vous allez sur une route autre que l'index.

Note latérale si quelqu'un utilise ZEIT Now pour déployer (bien que gh-pages soit similaire); J'ai réussi (après beaucoup de temps) à trouver comment le réparer. C'était un peu un effort, j'ai donc décidé de faire un article à ce sujet pour toute autre personne coincée.

https://itnext.io/fix-404-error-on-single-page-app-with-zeit-now-b35b8c9eb8fb

0
Jack