reactjs - 如何将React应用程序部署到godaddy服务器？

Question

我是 React 世界的新手，并且已经在上面创建了一个网站，一切都在本地主机上运行得很好，但是当我在服务器上上传构建文件时，它在 <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;

标题.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 路由器还需要了解 /react ，为此请使用 <Router>的basename支柱。 Documentation for basename .

从浏览器的开发者工具中检查“网络”选项卡是否存在加载 JS 文件时出现的 404 错误。