J'ai déployé mon site avec Netlify et j'ai des problèmes de routage.
Voici mon site Web: https://redux-co.netlify.com/
Et mon dépôt GitHub: https://github.com/jenna-m/redux-co
Plus précisément, si un utilisateur accède à une page en dehors de la page d'accueil et actualise la page, le Netlify 404 par défaut est rendu. À partir de la page 404, si je reviens à la page d'accueil et actualise, la page d'accueil est rendue.
De plus, ma page 404 personnalisée ne fonctionne pas comme elle le fait lorsque je suis sur localhost:3000 , mais j'aimerais d'abord résoudre ce problème d'actualisation avant de traiter mon composant 404 personnalisé.
J'utilise React et react-router, et je comprends que puisque j'utilise react-router, mon site Web ne se déploiera pas immédiatement.
Voici mon fichier _redirects , qui se trouve dans le dossier /public avec mon fichier index.html :
…
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && cp build/index.html build/404.html",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
…
Ceci est mon " “build†situé dans package.json :
/* /index.html 200
J'ai lu sur d'autres personnes qui vivent cela et ce qu'elles ont fait pour surmonter le problème. C'est ce à quoi j'ai fait référence jusqu'à présent…
https://www.freecodecamp.org/news/how-to-deploy-a-react-application-to-netlify-363b8a98a985/
https://hugogiraudel.com/2017/05/13/using-create-react-app-on-netlify/
Cette personne utilisait Vue et non React, mais j'ai quand même tenté ces solutions:
https://github.com/vuejs/vuepress/issues/457#issuecomment-390206649
https://github.com/vuejs/vuepress/issues/457#issuecomment-463745656
4 Réponses :
Supprimez _redirects de votre dossier public et déplacez netlify.toml à la racine de votre netlify.toml git, plus d'informations . Supprimez également du script de construction && cp build/index.html build/404.html - vous n'en avez plus besoin
Fonctionne comme un charme! Après avoir implémenté votre solution, j'ai également fait fonctionner mes pages 404 personnalisées. Merci pour l'aide!
J'ai ajouté ceci dans netlify.toml et cela fonctionne! [[redirects]] from = "/*" to = "/index.html" status = 200
C'était simple et cela a fonctionné pour moi . J'ai trouvé ce lien https://create-react-app.dev/docs/deployment#netlify
Ainsi , comme suggéré par ce lien, j'ai ajouté un _redirects fichier à l' intérieur du /public dossier comme /public/_redirects . J'ai ensuite collé /* /index.html 200 dans le fichier _redirects . J'ai fait tout cela dans mon VS Code, après quoi j'ai poussé vers github, puis bien sûr, mon netlify se redéploie automatiquement chaque fois que je pousse vers github. Mon problème a été résolu et le rafraîchissement n'apporte plus l'erreur 404.
Dans mon package.json, la section build ressemble à ceci;
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Remarque: certains articles disent que vous devez ajouter _redirects dans le dossier de build , mais le dossier de construction ne fait pas partie de ce qui est poussé vers github dans mon cas, c'est pourquoi l'ajout de _redirects au dossier public a mieux fonctionné pour moi, car le dossier public peut être poussé avec mon code.
À partir de votre index.js, enveloppez simplement votre composant avec HashRouter au lieu de tout ce qui est là plus tôt. N'oubliez pas d'importer HashRouter depuis react-router-dom.
C'est magique.
Ajoutez le fichier netlify.toml au répertoire racine de votre projet et collez-y le code suivant:
[[redirects]] from = "/*" to = "/" status = 200
pousser et redéployer votre application et c'est fait.
hm, étrange. Peut-être que vous avez défini quelque chose de mal sur les paramètres Netlify