时间戳

首页 > 解决方案 > React 构建页面仅显示页眉和页脚

reactjs - React 构建页面仅显示页眉和页脚

问题描述

我正在尝试使用命令“npm run build”构建我的反应应用程序，但是当我在浏览器上查看 index.html 文件（来自构建文件夹）时，它只显示页眉和页脚。

以下是我的 App.js 文件中的代码：

import React from 'react';
import './App.css';
import Header from './components/Header/Header';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Home from './components/pages/Home';
import Resume from './components/pages/Resume';
import Contact from './components/pages/Contact';
import Footer from './components/Footer/Footer';
function App() {
  return (
      <Router>
        <section className="mainWrap">
          <Header/>
          <Switch>
            <Route path='/' exact component={Home}  />
            <Route path='/Resume' exact component={Resume}  />
            <Route exact path="/http://bright-webs.com/portfolio.html" render={() => (window.location = "http://bright-webs.com/portfolio.html")} />
            <Route path='/Contact' exact component={Contact}  />
          </Switch>
          <Footer/>
        </section>
      </Router>
  );
}
export default App;

标签： reactjsnpmbuildswitch-statementrouter

解决方案

我认为您正在尝试在 CPanel 上部署 react 构建并遇到此问题。

为了在 Cpanel 上上传构建 zip 时解决此问题，在提取构建文件夹后复制构建文件夹中的所有文件，然后将其移动到 public_html 中，现在您可以看到您的项目正在运行

另外，请记住在运行构建命令之前在 package.Json 中添加主页。

推荐阅读