Я новичок в мире React и создал для этого веб-сайт, в 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;