La version React ne fonctionnera pas correctement sans ajouter index.html dans l'URL

Question

J'utilise le routage de hachage pour une application React JS. L'application fonctionne correctement dans l'environnement local.

Par exemple, https://stackoverflow.com/posts/ devrait être l'URL de l'application mais cela ne fonctionne pas et je dois utiliser https://stackoverflow.com/posts/index.html pour le faire travail.

Après le déploiement, j'ai remarqué qu'il téléchargeait un fichier vide nommé "download" au lieu de servir le fichier index.html Pour exécuter des builds sur le serveur, j'utilise l'architecture S3 et CloudFront.

Pour le moment, je ne peux pas dire si le routage HASH se comporte mal ou s'il y a un problème avec le déploiement AWS.

Extrait de code utilisant React JS

importer React depuis 'react';
importer ReactDOM depuis « react-dom » ;
importer { Fournisseur } depuis 'react-redux' ;
importer le magasin depuis './redux/store' ;
importer l'application depuis './App' ;
importer reportWebVitals depuis './reportWebVitals' ;
importer { HashRouter } depuis 'react-router-dom/cjs/react-router-dom' ;

ReactDOM.render(
 <Magasin du fournisseur={magasin}>
    <HashRouter>
      <Application />
    </HashRouter>
  </Fournisseur>

  document.getElementById('root')
);</pré>
<p><strong>Partie du contenu package.json</strong></p>
<pre class="brush:php;toolbar:false;">{
  "nom": "loremipsum",
  "version": "0.1.0",
  "privé" : vrai,
  "page d'accueil": "/loremipsum/"
}

Answer 1

Doit-il être déployé sur un sous-répertoire ? Si oui, vous devrez modifier le fichier package.json 文件的内容，以强制相对于 index.html pour fournir la ressource.

{
  "name": "loremipsum",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "scripts": {
    "build": "react-scripts build",
    "build-prd": "PUBLIC_URL=http://www.foo/relativepath react-scripts build"
    // ...
  }
}

Grâce à cela, nous pourrons accueillir http://www.foo 中的应用程序移动到 http://www.foo/relativepath 甚至https://www.foo/bar1/bar2/ sans reconstruire.

Vous devez également remplacer PUBLIC_URL pour inclure le domaine et le sous-répertoire dans lesquels vous souhaitez héberger vos fichiers