из недели сейчас я пытаюсь исправить мою проблему. Я создал приложение 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:
package.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 без ничего внутри ... он не запустится.
Проблема в основном в том, что я вижу, что мой скрипт запущен в сеть ( APACHE localhost ), но не отображается в браузере. Я также могу получить свои console.log и CSS (я знаю это, потому что я вижу, что мой фон серый), но в остальном ... пустая страница. Я буду очень рад, если кто-нибудь поможет мне решить эту проблему.
Вот результат визуально:
приписка
У меня есть две подсказки, откуда возникла проблема:
- Моя маршрутизация неверна, и страница не может найти правильный путь для ее отображения.
- Что-то не так с
localhost, и я не могу отобразить приложение с сервера Apache.
UPDATE
По запросу @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;
И далее я не буду публиковать остальную часть кода, но вот его часть:
HomePage.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.log('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;