Question

我是React World的新手，并且已经建立了一个网站，所有内容都在localhost上运行良好，但是当我在服务器上上传构建文件时，<div id="root"></div>中什么都没有显示，请帮我帮助将应用程序部署到Godaddy服务器。

这是我的 package.json 文件，在其中我已将主页设置为“ www.xyz.com/react”

package.json

{
  "name": "reactapp",
  "version": "0.1.0",
  "private": true,
  "homepage": "/react",
  "dependencies": {
    "@glidejs/glide": "^3.4.1",
    "express": "^4.17.1",
    "history": "^1.17.0",
    "html-react-parser": "^0.9.1",
    "jquery": "^3.4.1",
    "path": "^0.12.7",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-history": "^0.18.2",
    "react-owl-carousel": "^2.3.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.1.1",
    "react-typist": "^2.0.5",
    "read-more-react": "^1.0.9",
    "sweetalert2": "^8.18.4",
    "teletype": "^0.2.0",
    "webpack-cli": "^3.3.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "webpack": "webpack"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.41.2"
  }
}

App.js

import React from 'react';
import './App.css';
import { BrowserRouter  as Router, Route ,Switch } from "react-router-dom";
import  history from "history";
import Home from './pages/Home/HomePage.js';
import Portfolio from './pages/Portfolio/PortfolioPage.js';
import Careers from './pages/Careers/CareersPage.js';
import Blog from './pages/Blog/BlogPage.js';
import CaseStudies from './pages/Case-Studies/Case-Study-Page.js';
import SingleCaseStudy from './pages/Single-Case-Study/SingleCaseStudy.js';
import SingleBlogPage from './pages/Single-Blog/SingleBlogPage.js';
import Contact from './pages/Contact/ContactPage.js';
/*import BlogPage from './pages/Blog/BlogPage.js';
import CaseStudyPage from './pages/Case-Studies/Case-Study-Page.js';
import ContactPage from './pages/Contact/ContactPage.js';
import PortfolioPage from './pages/Portfolio/PortfolioPage.js';
*/
const routes = (
  <Router history={history}>
  <Switch>
    <Route path='/' exact name="Home Page" component={Home} />
                <Route path='/Portfolio' name="Portfolio Page" component={Portfolio} />
                <Route path='/Careers' name="Careers Page" component={Careers} />
                <Route path='/Blog' name="Blog Page" component={Blog} />
                <Route path='/CaseStudies' name="Case Studies Page" component={CaseStudies} />
                <Route path='/Contact' name="Contact Page" component={Contact} />
                <Route path='/SingleBlog/:id' name="Blog Page" component={SingleBlogPage} />
                <Route path='/SingleCaseStudy/:id' name="Case Study Page" component={SingleCaseStudy} />
  </Switch></Router> )
 function App() {
  return (
        <div className="main-wrapper">
               {routes}  
        </div>
  );
}

export default App;

Header.js

import React, { Component } from 'react';
import SearchComp from './../Search/SearchComp.js';
import SideMenuComp from './../Side-Menu/SideMenuComp.js';
import $ from 'jquery';
import { Link } from 'react-router-dom'
class HeaderComp extends Component {
    render() {
        return (
            <>
                <header className="itl-header itl-header--fixed fixed-top is-visible" data-nav-status="toggle">
                    <div className="itl-head">
                        <div className="container">
                            <nav className="navbar navbar-expand-lg navbar--dark">
                                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                                    <ul className="navbar-nav ml-auto">
                                        <li className="nav-item ">
                                             <Link to ="/" className="nav-link" activeclassname='active'>Home</Link>
                                        </li>
                                        <li className="nav-item">
                                            <Link to ="/Portfolio" className="nav-link" activeclassname='active'>Portfolio</Link>
                                        </li>
                                        <li className="nav-item">
                                            <Link to ="/Careers" className="nav-link" activeclassname='active'>Careers</Link>
                                        </li>
                                        <li className="nav-item">
                                            <Link to ="/CaseStudies" className="nav-link" activeclassname='active'>Case Studies</Link>
                                        </li>
                                        <li className="nav-item">
                                            <Link to ="/Contact" className="nav-link" activeclassname='active'>Contact</Link>
                                        </li>
                                        <li className="">
                                            <a href="#" className="btn btn-outline-primary btn-sm quick_enquiry_btn itl-off-canvas-activate jsOffcanvasActivate">Quick Enquiry</a>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                    </div>
                </header>
            </>
        );
    }
}

export default HeaderComp;

Answer 1

确保已正确配置基础href，它应指向/react。 More about Base URL element。

反应路由器还需要了解/react，为此使用<Router>的{{1}}道具。 Documentation for basename。

从浏览器开发人员工具的“网络”标签中查看加载JS文件时是否有404错误。

Answer 2

首先查看Chrome开发者版中控制台和网络标签中的错误。

在package.json中进行修改：“ homepage”：“。” 重建项目并部署。

Answer 3

感谢所有，我将代码更改为

<Router history={history} basename="/react">

因此，它现在显示了组件，还显示了我使用的“ $ {process.env.PUBLIC_URL}”的修复图像路径

将图像用作背景：

const slider2 = {
          backgroundImage: 'url('+`${process.env.PUBLIC_URL}`+'/assets/images/slideshow/2.jpeg)'
        };
<div className="cd-slide-item" style={slider2}></div>

对于我使用过的src图像：

<img src={`${process.env.PUBLIC_URL}/assets/images/cd/cd-image-pricing-1.png`} alt=""/>

如何将React App部署到Godaddy服务器？

package.json

App.js

Header.js

3 个答案: