Unable to navigate to pages in react (MERN stack) app which is deployed on Heroku - Please assist

Question

I was working on a MERN stack app and today I deployed it to Heroku. Everything is (API , UI) is working fine in the home page. Other than home page I am unable to navigate to other pages.

I have checked the answers from these questions but nothing worked.

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

Link of my heroku app - https://af-global-2021.herokuapp.com/ . Try navigate using navigations.

Check the full coding in Git - https://github.com/DeepikaSharma5/AFHost

Please help me to find what I need to do to have navigations available.

This is the app.js page I have in root folder (node , I have deleted some of the code)

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()
})

Thankyou in advance.

I have tried adding -> app.get('/*', (req, res) => {res.sendFile(path.resolve(__dirname, 'client', 'build','index.html'));});}

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

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

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

Also tried these like 'client/build','index.html'. Those are giving me mapping error. So I removed them and then there is no mapping error. Only the navigation is not working.