Question

从一个星期开始，我正试图解决我的问题。我已经用：

创建了一个React应用程序

npm create react-app

然后，我尝试使用：p进行构建

npm run build

通常一切正常。从命令提示符下，我创建了一个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（我知道，因为我看到我的背景是灰色的），但是剩下的是...空白页。如果有人可以帮助我解决该问题，我将非常高兴。

以下是直观的结果：

PS

我有两个提示问题的根源：

“我的路由”不正确，页面无法找到正确的路径来显示它。
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;

此外，我将不发布其余的代码，但这是其中的一部分：

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;

Answer 1

据我了解，您需要通过Apache将ReverseProxy传递给节点服务器。

意味着，您将需要执行npm start，并且默认情况下，我相信它是localhost上的端口3000，才能通过apache将您的站点与ReactJS配合使用。否则，您只能使用apache查看静态HTML页面，而React却什么也没做。随时在Skype上添加我，我可以告诉我我的意思-danbirlem

HTML无法从React JS（Localhost APACHE）呈现

1 个答案: