我正在构建一个在本地运行良好的React应用程序，但当我部署到heroku时，浏览器返回404 not found错误。heroku日志显示在“/”处找不到任何要呈现的内容

2022-10-30T12:53:49.067388+00:00 heroku[router]: at=info method=GET path="/" host=agile-springs-04238.herokuapp.com request_id=63c0c0ba-dcc6-42f2-8242-e85fcb7ff6ae fwd="66.45.129.177" dyno=web.1 connect=0ms service=1ms status=404 bytes=178 protocol=https

客户端中的APP.js定义了一个“/”路由：

import React, { useState } from "react";
import NavBar from "./components/Header";
import Home from "./pages/Home";
import SignUp from "./pages/SignUp";
import Login from "./pages/Login";
import SingleMovie from "./pages/SingleMovie";
import SingleShow from "./pages/SingleShow";
import Dashboard from "./pages/Dashboard";
import SearchBar from "./components/SearchBar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <NavBar />
      <SearchBar />
      <div className="">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/movieid/:id" element={<SingleMovie />} />
          <Route path="/showid/:id" element={<SingleShow />} />
          <Route path="/dashboard/:username" element={<Dashboard />} />
          <Route path="/signup" element={<SignUp />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

没有浏览器路由呈现，但所有API路由仍然工作。这似乎只是客户端问题。
我想这一定是我的server.js中的一个代码问题，但在我看来它是正确的。
server.js:

const express = require("express");
const routes = require("./controllers");
require("dotenv").config();
const PORT = process.env.PORT || 3001;
const path = require("path");
const sequelize = require("./config/connection");
const app = express();
const cors = require("cors");
const corsOptions = {
  origin: [
    "http://localhost:3000",
    "https://agile-springs-04238.herokuapp.com/",
  ],
  credentials: true, //access-control-allow-credentials:true
  optionSuccessStatus: 200,
};
app.use(cors(corsOptions));

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use(routes);

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "../client/build")));
}

app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "../client/build/index.html"));
});

sequelize.sync({ force: false }).then(() => {
  app.listen(PORT, () => console.log(`Now Listening on ${PORT}`));
});

所以我想可能是一个package.json脚本错误。但是看起来构建脚本应该在那里。
根包.json：

"name": "naimdbv2",
  "version": "1.0.0",
  "main": "server/server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server/server.js",
    "dev": "concurrently \"cd server && npm run watch\" \"cd client && npm start\"",
    "install": "cd server && npm i && cd ../client && npm i",
    "seed": "cd server && npm run seed",
    "build": "cd client && npm run build",
    "watch": "webpack --watch --progress"
  },

我还没有找到任何以前的答案，已经能够帮助。似乎是heroku没有找到客户端构建后，被部署，但我不明白为什么。我从来没有遇到过这个问题之前。