HTML не отображается из React JS (Localhost APACHE)
уже неделю пытаюсь решить свою проблему. Я создал приложение React с:
npm create react-app
И после этого я попытался сделать сборку с помощью:
npm run build
Обычно все прошло хорошо. Из командной строки я создал папку сборки. Внутри я создал свой файл .htacess с этой опорой:
.htacess
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Я внес некоторые изменения в свой package.json:
пакет.json
"homepage": "http://localhost/build-interface",
И, наконец, я сделал несколько последних изменений в моем index.html внутри
/build/index.html
index.html
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<link rel = "shortcut icon" href = "/build-interface/favicon.ico" />
<meta name = "viewport"
content = "initial-scale=1,maximum-scale=1,minimum-scale=1,target-densitydpi=device-dpi,user-scalable=no" />
<meta name = "theme-color" content = "#000000" />
<link rel = "manifest" href = "/build-interface/manifest.json" />
<title>React App</title>
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity = "sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin = "anonymous">
<link href = "/build-interface/static/css/2.df50b353.chunk.css" rel = "stylesheet">
<link href = "/build-interface/static/css/main.e73dfb08.chunk.css" rel = "stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id = "root"></div>
<script>!function (l) { function e(e) { for (var r, t, n = e[0], o = e[1], u = e[2], i = 0, f = []; i < n.length; i++)t = n[i], c[t] && f.push(c[t][0]), c[t] = 0; for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (l[r] = o[r]); for (s && s(e); f.length;)f.shift()(); return p.push.apply(p, u || []), a() } function a() { 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 = i(i.s = t[0])) } return e } var t = {}, c = { 1: 0 }, p = []; function i(e) { if (t[e]) return t[e].exports; var r = t[e] = { i: e, l: !1, exports: {} }; return l[e].call(r.exports, r, r.exports, i), r.l = !0, r.exports } i.m = l, i.c = t, i.d = function (e, r, t) { i.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, i.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, i.t = function (r, e) { if (1 & e && (r = i(r)), 8 & e) return r; if (4 & e && "object" == typeof r && r && r.__esModule) return r; var t = Object.create(null); if (i.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: r }), 2 & e && "string" != typeof r) for (var n in r) i.d(t, n, function (e) { return r[e] }.bind(null, n)); return t }, i.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return i.d(r, "a", r), r }, i.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, i.p = "/build-interface/"; 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; a() }([])</script>
<script type='text/javascript' src = "/build-interface/static/js/2.dac00856.chunk.js"></script>
<script type='text/javascript' src = "/build-interface/static/js/main.75794944.chunk.js"></script>
</body>
</html>
Я делал это пару раз и пробовал разные вещи, но результат остается прежним. Даже я рендерил чистую React App без ничего внутри... не запускается.
Проблема в основном в том, что я вижу, что мой скрипт запущен в сети (АПАЧ локальный), но не отображается в браузере. Я также могу получить свои console.info и CSS (я знаю это, потому что я вижу, что мой фон серый), но в остальном ... пустая страница. Я буду очень рад, если кто-то поможет мне решить эту проблему.
Вот результат визуально:
P.S.
У меня есть две подсказки, откуда возникает проблема:
- Моя маршрутизация неверна, и страница не может найти правильный путь для ее отображения.
- Что-то не так с
localhost, и я не могу отобразить приложение с сервераApache.
ОБНОВИТЬ
По просьбе @AKX я опубликую свой маршрут:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom'
import './styles/index.css';
import App from './components/App';
import Select from './pages/SelectionPage';
import Summary from './pages/SummaryPage';
import * as serviceWorker from './serviceWorker';
const Root = () => (
<Router>
<Switch>
<Route exact path = "/" component = {App} />
<Route path = "/select" component = {Select} />
<Route path = "/summary" component = {Summary} />
</Switch>
</Router>
)
ReactDOM.render( <Root/>, document.getElementById('root'));
serviceWorker.unregister();
И, кроме того :
App.js
import React, { Component } from 'react';
import Home from '../pages/HomePage';
import '../styles/App.css';
class App extends Component {
render() {
return (
<div className='App'>
<div id='blur-overlay'></div>
<div className='mainContainer'>
<Home/>
</div>
</div>
);
}
}
export default App;
И далее весь остальной код выкладывать не буду, а вот его часть:
Домашняя страница.js
import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
import { Switch } from 'react-router'
import Moment from 'react-moment';
import BarcodeReader from 'react-barcode-reader';
import 'moment-timezone';
import adv from '../img/add-01.svg'
import '../styles/App.css';
import Warning from '../components/PopupWarning'
import Ok from '../components/PopupOk'
import Alert from '../components/PopupAlert'
import SelectionPage from './SelectionPage'
import Header from '../components/Header';
import Footer from '../components/Footer';
// import connection from '../mysql/connection'
const dateToFormat = new Date();
console.info('this is the home page');
class Home extends Component {
constructor() {
super();
this.state = {
okRedirect: false,
modalOK: false
}
this.handleScan = this.handleScan.bind(this)
}
handleScan(data) {
this.setState({
modalOK: true
})
setTimeout( function() {
this.setState({ okRedirect: true });
}.bind(this) , 1500)
}
render() {
if (this.state.okRedirect) {
return (
<SelectionPage/>
);
}
return (
<Router>
<Switch>
<div className='home'>
<Header/>
<div>
<BarcodeReader
onError = {this.handleError}
onScan = {this.handleScan}
/>
<p>{this.state.result}</p>
</div>
<div className='home-main-content'>
<div className='motd'>
<h1>Message of the day :</h1>
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu ipsum elementum, maximus ligula ut, pretium libero. Nullam quis nulla lectus. Morbi tristique enim eu enim scelerisque suscipit. Curabitur fringilla diam nec ipsum tempor sodales. Sed in lectus imperdiet, bibendum enim et, faucibus quam. In quis magna bibendum, porta massa et, cursus massa. Suspendisse sem tellus, pulvinar vel sollicitudin id, tempor dictum nunc. Fusce ultricies, nisi ut sollicitudin tincidunt, nibh nulla viverra dolor, et dignissim eros odio eu elit. Nulla eu tincidunt tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu ipsum elementum, maximus ligula ut, pretium libero. Nullam quis nulla lectus. Morbi tristique enim eu enim scelerisque suscipit. Curabitur fringilla diam nec ipsum tempor sodales. Sed in lectus imperdiet, bibendum enim et, faucibus quam. In quis magna bibendum, porta massa et, cursus massa. Suspendisse sem tellus, pulvinar vel sollicitudin id, tempor dictum nunc.
</div>
<aside>
<div className='clock'>
<span className='clock-hour'><Moment
date = {dateToFormat}
format='HH'
interval = {30000}
/>
</span>
<span className='clock-min'>
<Moment
date = {dateToFormat}
format='mm'
interval = {30000}
/>
</span>
<span className='clock-date'>
<Moment
date = {dateToFormat}
format=' ddd , DD MMM'
/>
</span>
</div>
<div className='home-info'>
<h1 id='a-off-h'>Avaible Officers:</h1>
<ul className='a-off'>
{''}
<li><p>John Doe</p></li>
<li><p>Smith John</p></li>
<li><p>Nicolas M.</p></li>
<li><p>David Reanaers</p></li>
<li><p>Georgi Mumdzhiev</p></li>
</ul>
</div>
</aside>
</div>
<p className='qr'>
<div className='onlineStatus'>
<div class = "nuclear">
<span className='statusOnlyName'>online</span>
</div>
</div>
<span className='advert-text'>
MyShootLog is avaible on :
</span>
<span className='par'><img id='advert' src = {adv} alt='advert' /></span>
</p>
<Alert />
<Ok {...this.state} />
<Warning />
<Footer/>
</div>
</Switch>
</Router>
);
}
}
export default Home;
@AKX Я обновил часть своего кода. Вы можете ознакомиться с ним в основном посте.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Насколько я понимаю, вам нужно передать ReverseProxy через apache на сервер node.
Это означает, что вам нужно будет выполнить npm start, и по умолчанию я считаю, что это порт 3000 на локальном хосте, чтобы увидеть, как ваш сайт обслуживается с помощью ReactJS через apache. В противном случае вы просто просматриваете статические HTML-страницы с помощью apache, а React ничего не делает. Не стесняйтесь добавить меня в Skype, и я покажу вам, что я имею в виду - danbirlem
«сервер узла предназначен только для разработки» о боже, я думал, что этот человек явно разрабатывает проект узла. Спасибо за бессмысленный минус.
Я бы не назвал это бессмысленным отрицанием; Я бы назвал размещение сервера разработки CRA в Интернете (цитируя часто задаваемые вопросы о голосовании) «ответом, который явно и, возможно, опасно неверен».
Извините, если я прозвучал горько. Я вижу беспокойство, но по характеру вопроса, не будет ли работающий сервер Apache OP также доступен в Интернете?
Я не понимаю, чем запуск сервера узла (здесь для разработки) будет значительно отличаться от запуска сервера apache в отношении доступа к Интернету.
Серверы разработки, как правило, предоставляют трассировку и другую отладочную информацию (не говоря уже о том, что они обычно запускают неминифицированный/неоптимизированный код, который легче отлаживать), что может представлять угрозу безопасности. Некоторые серверы разработки даже допускают прямое удаленное выполнение кода.
Приложение явно рендерится, судя по тому, что выводится на консоль — здесь может быть проблема с маршрутизацией. Пожалуйста, покажите нам немного вашего кода маршрутизации.