Как исправить белый экран после сборки с помощью приложения create-реагировать?
Я использовал react-router-dom и создаю свое приложение для реагирования. Когда я развертываю его на сервере, я получаю пустую страницу, а консоль пуста.
Мой App.js:
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;
Мой index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App/>
, document.getElementById('root'));
Мой 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/[email protected]/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/[email protected]/umd/react.production.min.js"></script>
</body>
</html>
В моем package.json у меня есть:
"homepage": "."
И когда я меняю homepage на https://dev.test.com/Reactи
когда я запускаю его, я получаю пустую страницу, например адрес, который я развернул: https://dev.test.com/React/ Он не является общедоступным. Когда я запускаю serve-s build, я получаю пустой экран на консоли, я получаю:
Мой 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/[email protected]/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/[email protected]/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>
Как я могу это исправить?
@Rallen да /React это каталог на моем сервере, не могли бы вы проверить мой пост, пожалуйста? Добавляю скомпилированный index.html на продакшн. Когда я запускаю его на своем сервере, консоль пуста.
Ответы 12
Попробуйте заменить basename = "/" на BrowserRouter на basename = "/React". react-router необходимо, если используется в подкаталоге.
basename: The base URL for all locations. If your app is served from a sub-directory on your server, you'll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.
Также измените homepage в package.json на URL вашей производственной цели. homepage = "." означает, что он будет работать на каждом домене, где он расположен в корне сервера (и это также поведение по умолчанию).
Из Документы React относительно развертывания:
By default, Create React App produces a build assuming your app is hosted at the server root. To override this, specify the homepage in your package.json, for example:
"homepage": "http://mywebsite.com/relativepath",This will let Create React App correctly infer the root path to use in the generated HTML file.
Домашняя страница будет "homepage":"." или "homepage":"https://dev.test.com/React"?
Привет! Не могли бы вы поделиться, какую домашнюю страницу вы закончили использовать? Я пробовал так много вариаций. Должно быть http или https? Что должно быть там, где relativepath?
Мне пришлось использовать точный BASE URL моего домена вместо '.' на «домашней странице», потому что на ней не отображались изображения. Кроме того, этот метод сработал как шарм, спасибо!
Я столкнулся с той же проблемой и решил ее!
Если у кого-то все еще есть эта проблема, выполните следующие действия.
1 - Вам необходимо обновить браузер. Обратитесь к этому, https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers
2- Вам нужно добавить зависимость "react-router-dom": к файлу package.json, используя npm i react-router-dom
3- Добавьте "homepage": ".", в файл package.json.
Надеюсь это поможет.
Добавьте только «домашнюю страницу»: «.» в файл package.json
У меня тоже была такая проблема, пустой белый экран, ошибок нет. Ни один из этих ответов не решил мою проблему. Я оставлю решение моей проблемы здесь, чтобы кто-то вроде меня не потратил 2 часа на маленькую ошибку.
Просто убедитесь, что вы загружаете все файлы в папку /build на сервер.
Я сделал то же самое! моя проблема все еще сохраняется. Я только что загрузил все свои файлы из папки сборки на s3. Когда я загружаю свой S3, он показывает пустой экран и никаких ошибок.
У меня была эта проблема. Я пытался открыть приложение после сборки, дважды щелкнув index.html, и это тоже не сработало, я получил пустую страницу, но если встроенные файлы запускаются в серверной среде, работает. https://create-react-app.dev/docs/deployment/
Подобная перестановка сработала для меня, удалить точно? из корневого пути
<Router>
<Route exact path = "/about" component = {About} />
<Route path = "/" component = {App} />
</Router>
Я использовал домашнюю страницу = "." в моем package.json, но '/ about' не идет по относительному пути
Я просто добавляю basename='/index.html' в свой index.html, подробнее смотрите код ниже:
import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import LoginPage from './components/LoginPage/LoginPage';
import Dashboard from './components/Dashboard/Dashboard';
function App() {
return (
<Router basename='/index.html'>
<Switch>
<Route path='/' exact component = {LoginPage} />
<Route path='/dashboard' component = {Dashboard}/>
</Switch>
</Router>
);
}
export default App;
Надеюсь, это поможет.
У меня была такая же проблема с «белым экраном», которую я решил, просто добавив:
<BrowserRouter basename = "/">
basename = "/" в файле index.js.
это сработало для меня, надеюсь, что это сработает для вас.
Ни один из приведенных выше ответов не работает для меня. Поэтому я попытался запустить его в другом порту, и он работает.
serve -s build -l 4000
Это может быть связано со страницей, маршрут которой вы переименовали.
У меня был белый экран, на котором не было ошибок, потому что я использовал history.push, чтобы отправить пользователя на страницу, которую мы переименовали.
Страницы больше не существовало, поэтому отображался пустой белый экран.
Просто добавлю дополнительный ответ, поскольку я знаю, что для этого есть много причин. У меня была белая страница после сборки, и я увидел 404 в консоли браузера для веб-фрагментов. Я установил «домашнюю страницу» в package.json и был озадачен.
Кэширование на стороне сервера
Однако я заметил в сообщении 404, что фрагмент ссылается на имел другой хеш, чем тот, что находится в моей папке сборки; эти "старые" куски пытались получить, а не новые из последней сборки с другими хэшами в имени файла.
например, ошибка 404 в консоли моего браузера указывала на фрагмент с хешем, например:
main.f1d2d060.chunk.css // from an old build
^^^^^^^^^
Где, как и в папке /build, фрагмент был на самом деле:
main.adg25e108.chunk.css // from latest build
^^^^^^^^^
Таким образом, я понял, что какой-то файл должен быть кэширован, пытаясь получить старую вещь, а не новую. Оказалось, что у меня был включен кэширование на стороне сервера, и старые веб-фрагменты пытались получить кэшированной версией asset-manifest.json... :sigh: ...Мне удалось очистить кеш для моего веб-хостинга (SiteGround).
Сброс кеша зависит от вашего хоста: https://www.siteground.com/kb/clear-site-cache/
Что-то, что следует учитывать, если вы пробовали все остальное - дважды и трижды проверьте, что хеш-строка в 404 в вашей консоли совпадает с вашей /build папкой, иначе вы можете оказаться в той же ситуации со старым активом-манифест.json, пытающимся чтобы получить неправильный материал.
Что сработало для меня, так это добавление basename = "/index.html" к BrowserRouter:
<BrowserRouter basename = "/index.html">
...
</BrowserRouter>
Это настоящая катастрофа, сколько существует разных ответов. И все они, похоже, кому-то помогли. Мне помог этот! Я использую Nginx в Linux.
Была эта проблема с react-router-dom v6. Мне помогло заменить <BrowserRouter> на <HashRouter> и добавить "homepage": "." в package.json
Является ли
/Reactкаталогом на вашем сервере? Также можете ли вы предоставить скомпилированныйindex.htmlиз вашей производственной сборки?