无法导航到部署在 Heroku 上的 reactMERN 堆栈应用中的页面 - 请协助

如何解决无法导航到部署在 Heroku 上的 reactMERN 堆栈应用中的页面 - 请协助

我正在开发一个 MERN 堆栈应用程序，今天我将它部署到 Heroku。一切（API，UI）在主页上都运行良好。除了主页，我无法导航到其他页面。

我已经检查了这些问题的答案，但没有任何效果。

React Routing works in local machine but not Heroku

React routes are not working in facebook's create-react-app build

Express status 404 with react-router

我的 heroku 应用链接 - https://af-global-2021.herokuapp.com/ .尝试使用导航进行导航。

检查 Git 中的完整编码 - https://github.com/DeepikaSharma5/AFHost

请帮助我找到我需要做什么才能使用导航。

这是我在根文件夹中的 app.js 页面（节点，我已经删除了一些代码）

const express = require("express");
const cors = require("cors");
const mongoose = require("mongoose");
const nodemailer = require("nodemailer");
const path = require("path");

require("dotenv").config();

const app = express();
const port = process.env.PORT || 6060;

app.use(cors());
app.use(express.json());

const url = process.env.MONGODB_URI;
global.URL = url;

mongoose.connect(url,{ useNewUrlParser: true,useCreateIndex: true,useUnifiedTopology: true 
 })

const connection = mongoose.connection

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
}

connection.once("open",() => {
console.log("MongoDB connection successfully")
})

const admin_accept_budject = require("./routers/admin_accept_budject.js")
app.use("/admin_accept_budject",admin_accept_budject)

const admin_side_user = require("./routers/admin_side_user")
app.use("/admin_side_user",admin_side_user)

const admin_keynote = require("./routers/admin_keynote")
app.use("/admin_keynote",admin_keynote)

const admin_supplier = require("./routers/admin_supplier")
app.use("/admin_supplier",admin_supplier)

const AboutUs = require("./routers/AboutUs")
app.use("/aboutus",AboutUs)

app.listen(port,() => {
  console.log(`Server is running on port: ${port}`)
})

//Contact Us Email sending configuration
app.post("/contactdata",(req,res) => {
  let data = req.body
  let smtpTransoprt = nodemailer.createTransport({
    service: "gmail",port: 465,auth: {
      user: "applicationframework2021@gmail.com",pass: "applictio435@",},})
let mailOptions = {
  from: data.email,to: "applicationframework2021@gmail.com",subject: `Message from ${data.name}`,html: `
    <h3>informations</h3>
    <ul>
        <li>Name: ${data.name}</li>
        <li>Email: ${data.email}</li>
        <li>Subject: ${data.subject}</li>
    </ul>

    <h3>Message</h3>
    <p>${data.message}</p>
    `,}
 smtpTransoprt.sendMail(mailOptions,(err,info) => {
   if (err) {
     res.send(err)
   } else {
     res.send(info)
   }
 })
 smtpTransoprt.close()
})

先谢谢你。

我尝试添加 -> app.get('/*',res) => {res.sendFile(path.resolve(__dirname,'client','build','index.html'));});}

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

app.get('*','index.html'));});}

也尝试过像“client/build”、“index.html”这样的方法。那些给我映射错误。所以我删除了它们，然后就没有映射错误了。只有导航不起作用。