Node.js MERN堆栈部署到heroku，但在初始加载时不服务于根，只显示子路由

我已经创建了一个MERN应用程序，并试图将其部署到heroku。当我尝试构建应用程序并使用“heroku local”进行测试时，一切似乎都正常，本地服务器启动，数据库连接，但是初始页面“/”是一个空白屏幕。但是，如果我键入一个不同的路径，如“/rankings/”，它将起作用

下面是我的express服务器的副本

// all imports below
const express = require("express");
const mongoose = require('mongoose');
const fileUpload = require("express-fileupload")
const p4pBoxingRankings = require("./p4pBoxingRankings")
const divisionalRankings = require("./divisionalRankings.js")
const ufcP4pRankings = require("./ufcRankings.js")
const ufcDivisionalRankings = require("./ufcDivisionalRankings.js")



let bodyParser = require('body-parser');
let cors = require('cors');

const app = express();
const path = require('path');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(fileUpload());
app.use(cors());
app.use(express.static('public'));
app.set('port', (process.env.PORT || 8080));
// code to connect datbase below
const URI = process.env.MONGODB_URI || "mongodb+srv://skunk_hunnt:P@cquiaop4p224@cluster0.4cqzd.mongodb.net/Fight_Auction?retryWrites=true&w=majority"
mongoose.connect(URI, { useNewUrlParser: true })
    .then(() => {
    console.log('Database connected...')
  }).catch((err) => {
    console.log(err);
})


// code to stringify items below
const ItemSchema = new mongoose.Schema({
    itemDescription: { type: String },
    askingPrice: { type: String },
    itemDetails: { type: String },
    pictures: {type: String}
});
const fightItem = mongoose.model('Item', ItemSchema);

// all axios requests below
app.get("/items", function(req, res){
    //make a DB query and send back all the items
    fightItem.find({},(err, data)=>{
        res.send(data)
    })
  })

app.get("/rankings", async(req, res) => {
    res.send(p4pBoxingRankings);    
})

app.get("/rankings/divisions", async(req, res) => {
    res.send(divisionalRankings);
})

app.get("/rankings/divisions/ufcp4p", async(req, res) => {
    res.send(ufcP4pRankings);
})

app.get("/rankings/divisions/ufcp4p/ufcdivisions", async(req, res) => {
    res.send(ufcDivisionalRankings);

})



app.post("/items", function(req, res){
      
    let item = new fightItem();
    item.itemDescription = req.body.item.itemDescription
    item.askingPrice = req.body.item.askingPrice
    item.itemDetails = req.body.item.itemDetails
    item.pictures = req.body.item.pictures
    item.save((err,res)=>{
    })

});

app.post('/upload', (req, res) => {
    if (req.files === null) {
      return res.status(400).json({ msg: 'No file uploaded' });
    }
  
    const file = req.files.file;
  
    file.mv(`${__dirname}/public/${file.name}`, err => {
      if (err) {
        console.error(err);
        return res.status(500).send(err);
      }
  
      res.json({ fileName: file.name, filePath: `/public/${file.name}` });
    });
});

// if (process.env.NODE_ENV === 'production') {
//     // Serve any static files
//     app.use(express.static(path.join(__dirname, 'build')));
//   // Handle React routing, return all requests to React app
//     app.get('*', function(req, res) {
//       res.sendFile(path.join(__dirname, '/build/index.html'));
//     });
//   } 

  app.use("", express.static(path.join(__dirname, 'build')));
  // Handle React routing, return all requests to React app
    app.get('*', function(req, res) {
        res.sendFile(path.join(__dirname, '/build/index.html'));
    });
   

app.listen(app.get('port'), function() {
    console.log('Server started on port '+app.get('port'));
});

这是我的路由器

import React from "react";
import { BrowserRouter, Route, Switch, } from "react-router-dom";
import BrowseItemsPage from "../components/BrowseItemsPage.jsx";
import HomePage from "../components/HomePage.jsx";
import NewsAndRankings from "../components/NewsAndRankingsPage.jsx";
import NotFoundPage from "../components/NotFoundPage.jsx";
import SellItemPage from "../components/SellItemPage.jsx";




const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Switch>
                <Route path="/" component={HomePage} exact={true}/>
                <Route path="/browse-items" component={BrowseItemsPage}/>
                <Route path="/sell-items" component={SellItemPage}/>
                <Route path="/rankings" component={NewsAndRankings}/>
                <Route component={NotFoundPage}/>
            </Switch>
        </div>
    </BrowserRouter>
    
);

export default AppRouter;茀

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch，}；
从“./components/BrowseItemsPage.jsx”导入BrowseItemsPage；
从“./components/HomePage.jsx”导入主页；
从“./components/NewsAndRankingsPage.jsx”导入新闻和排名；
从“./components/NotFoundPage.jsx”导入NotFoundPage；
从“./components/SellItemPage.jsx”导入SellItemPage；
常量批准器=（）=>(
);
导出默认批准程序；茀

您的package.json文件中是否配置了heroku postbuild？@ozgur是的，我执行“heroku postbuild”：“npm安装和npm运行构建”，它为构建服务。您的package.json文件中是否配置了heroku postbuild？@ozgur是的，我执行“heroku postbuild”：“npm安装和npm运行构建”，它为构建服务。