J'ai utilisé react-router-dom et j'ai construit mon react-app. Lorsque je le déploie sur le serveur, j'obtiens une page vierge et la console est vide.
Mon App.js est:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
<meta name="theme-color" content="#000000"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
<link rel="manifest" href="manifest.json">
<link rel="data" href="data.json">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<title>Test</title>
<link href="/React/static/css/2.2aa93811.chunk.css" rel="stylesheet">
<link href="/React/static/css/main.ca6e1d23.chunk.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script>!function(f){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],l=0,a=[];l<n.length;l++)t=n[l],c[t]&&a.push(c[t][0]),c[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(f[r]=o[r]);for(s&&s(e);a.length;)a.shift()();return p.push.apply(p,u||[]),i()}function i(){for(var e,r=0;r<p.length;r++){for(var t=p[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==c[u]&&(n=!1)}n&&(p.splice(r--,1),e=l(l.s=t[0]))}return e}var t={},c={1:0},p=[];function l(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return f[e].call(r.exports,r,r.exports,l),r.l=!0,r.exports}l.m=f,l.c=t,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(r,e){if(1&e&&(r=l(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)l.d(t,n,function(e){return r[e]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/ReactCalendar/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;i()}([])</script>
<script src="/React/static/js/2.4a7f0704.chunk.js"></script>
<script src="/React/static/js/main.f9268394.chunk.js"></script>
</body>
</html>
Mon index.js est:
"homepage": "."
Mon index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
<link rel="manifest" href="manifest.json">
<link rel="data" href="data.json">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<title>Test</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
</body>
</html>
Dans mon package.json, j'ai:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App/>
, document.getElementById('root'));
Et lorsque je change ma page d'accueil en https://dev.test.com/React et
quand je l'exécute, j'obtiens une page vierge, telle que l'adresse que j'ai déployée est: https://dev.test.com/React/ Ce n'est pas public. Lorsque j'exécute serve-s build , j'obtiens un écran vide sur la console, j'obtiens:
Mon index.html en production est:
import React, { Component } from 'react';
import { Route, Switch, BrowserRouter} from 'react-router-dom';
import Agenda from './components/Agenda/Agenda';
import Planning from './components/Planning/Planning';
class App extends Component {
render() {
return (
<div>
<BrowserRouter basename="/">
<Switch>
<Route exact path="/" component={Agenda} />
<Route path="/planning" component={Planning} />
</Switch>
</BrowserRouter>
</div>
);
}
}
export default App;
Comment puis-je résoudre ce problème?
5 Réponses :
Essayez de remplacer basename = "/" sur votre BrowserRouter par basename = "/ React" . react-router en a besoin s'il est utilisé dans un sous-répertoire.
À partir de react-router docs :
basename : l'URL de base de tous les emplacements. Si votre application est servie à partir d'un sous-répertoire sur votre serveur, vous voudrez le définir sur le sous-répertoire. Un nom de base correctement formaté doit avoir une barre oblique au début, mais pas une barre oblique à la fin.
Remplacez également page d'accueil dans package.json par l'URL de votre cible de production. homepage = "." signifie qu'il fonctionnera sur tous les domaines où il se trouve à la racine du serveur (et est également le comportement par défaut).
De Réagissez à la documentation concernant le déploiement :
Par défaut, Create React App produit une compilation en supposant que votre application est hébergée à la racine du serveur. Pour remplacer cela, spécifiez la page d'accueil dans votre package.json, par exemple:
"homepage": "http://mywebsite.com/relativepath",Cela permettra à Create React App de déduire correctement le chemin racine à utiliser dans le fichier HTML généré.
La page d'accueil sera "homepage": "." ou "homepage": "https://dev.test.com/React" ?
merci cela fonctionne bien, pouvez-vous m'aider s'il vous plaît stackoverflow.com/questions/56337582/... ?
Salut! Pouvez-vous s'il vous plaît partager la page d'accueil que vous avez fini d'utiliser? J'ai essayé tellement de variantes. Doit-il être http ou https ? Que doit aller là où se trouve relativepath ?
J'ai rencontré le même problème et je l'ai résolu!
Si quelqu'un a encore ce problème, suivez les étapes suivantes.
1 - Vous devez mettre à jour votre navigateur. Reportez-vous à ceci, https: // create-react -app.dev/docs/supported-browsers-features/#configuring-supported-browsers
2- Vous devez ajouter la dépendance "react-router-dom": à votre fichier package.json en utilisant npm i react-router-dom
3- Ajoutez "homepage": ".", à votre fichier package.json
J'espère que cela vous aidera.
Ajoutez uniquement "homepage": ".", À votre fichier package.json
J'ai aussi eu ce problème, écran blanc vide, aucune erreur. Aucune de ces réponses n'a résolu mon problème. Je vais laisser la solution à mon problème ici, pour que quelqu'un d'autre comme moi ne passe pas 2 heures sur une petite erreur.
Assurez-vous simplement de télécharger tous les fichiers du dossier / build sur le serveur.
J'ai fait la même chose! mon problème persiste toujours. Je viens de télécharger tous mes fichiers du dossier de construction vers s3. Lorsque je charge mon S3, il affiche un écran vide et aucune erreur.
J'ai eu ce problème. J'essayais d'ouvrir l'application après la construction en double-cliquant sur l'index.html et je n'ai pas fonctionné non plus, j'ai obtenu la page vierge mais si les fichiers construits sont exécutés dans un environnement de serveur fonctionne. https://create-react-app.dev/docs/deployment/ < / p>
Réorganiser comme ça a fonctionné pour moi, supprimer exactement? depuis le chemin racine
<Router>
<Route exact path="/about" component={About} />
<Route path="/" component={App} />
</Router>
J'ai utilisé homepage = "." dans mon package.json mais '/ about' ne va pas vers le chemin relatif
/ Reactest-il un répertoire sur votre serveur? Pouvez-vous également fournir leindex.htmlcompilé à partir de votre version de production?@Rallen oui
/ Reactest un répertoire sur mon serveur, pouvez-vous vérifier mon message s'il vous plaît? J'ajoute leindex.htmlcompilé en production. Lorsque je l'exécute sur mon serveur, la console est vide.