Scrolling to different ids is not working on React App(MERN, as backend based on Node) on Heroku production environment

Question

The General File structure of the project is given below

• saltco/build (frontend React part, saltco is similar to client folder)
• server.js
• package.json
• others

Code of the server.js file

// require dependencies
require("dotenv").config()
const express = require("express")
const app = express()
const path = require("path");
// const cors = require("cors")

// Import local dependencies
const mongoConnect = require("./configs/mongoDB")
const jobsRouter = require("./routes/jobsRouter")
const joinusMessagesRouter = require("./routes/joinusMessagesRouter")
// const enterJobs = require("./temp/enterJobs")

// Express Middlewares
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// cors middleware
// app.use(cors())

// Connect to prior database
// Connect to MongoDB
mongoConnect()

// Routes
// temp routes
// enterJobs()

// jobs routes
app.use("/jobs", jobsRouter)

// joinus Messages routes
app.use("/join", joinusMessagesRouter)

// check the project on deploment or not
if (process.env.NODE_ENV === 'production') {
     app.use(express.static('saltco/build'))
     app.get('/*', (req, res) => {
         let url = path.join(__dirname, 'saltco', 'build', 'index.html');
         if (!url.startsWith('/app/')) // we're on local windows
             url = url.substring(1);
         res.sendFile(url);
      });
} else {
    app.get("/", (req, res) => {
        res.send("This application is on Development/Maintenance. Please try again later.")
    })
}

// port of the server
const port = process.env.PORT

// Run the server
app.listen(port || 5000, () => {
    console.log(`Server is running on port 5000 on local or ${port} on the cloud`);
})

App.js Code(React Side)

import React from "react";
import Navbar from "./Navbar";
import Carousel from "./Carousel";
import Mission from "./Mission";
import About from "./About";
import TeamCarousel from "./TeamCarousle";
import Business from "./Business";
import Investors from "./Investors";
import Indivisual from "./Indivisual";
import Intern from "./Intern";
import Footer from "./Footer";
import Application from "./Application"
import ApplicationSubmit from "./ApplicationSubmit"
import { HashRouter as Router, Switch, Route } from "react-router-dom";
import "./style.css";

// basename={process.env.PUBLIC_URL}
export default function App() {
    return (
        <Router>
            <Switch>
                <Route exact path="/">
                    <Navbar />
                    <Carousel />
                    <Mission />
                    <About />
                    <TeamCarousel />
                    <Business />
                    <Investors />
                    <Indivisual />
                    <Intern />
                    <Footer />
                </Route>

                <Route  path="/application" component={Application}></Route>
                <Route path="/submit/:jobId" component={ApplicationSubmit}></Route>
            </Switch>
        </Router>
    )
}

Now from the navbar if I try to go to any other div, the scrolling is not working there. But if I try to move to any other page then it's working completely fine. I'm using HashRouter here.

Code(navbar part only) for the Navbar component

return (
    <div className="links">
        <div className="innerLinks">
            <Link href="#about" target="_parent">About</Link>
            <Link hred="#teams" target="_parent">Teams</Link>
            <Link href="#Business"target="_parent" >Businesses</Link>
            <Link href="#Indivisual" target="_parent">Indivisuals</Link>
            <Link href="#Investors" target="_parent">Investors</Link>
        </div>
        <Link href="#intern" target="_parent">
        <Button
            color="primary"
            className="button animate__animated animate__pulse animate__infinite"
        >
            Join Us
        </Button>
        </Link>
    </div>
 );

Please Note Scrolling and Navigation through navbar completely working on the local Environment. Problem occurring on the production side only, in the Heroku environment.

Answer 1

This solution works with react-router v5

import React, { useEffect } from 'react'
import { Route, Switch, useLocation } from 'react-router-dom'

const App = () => {

  const { pathname, hash } = useLocation();

  useEffect(() => {
    // if not a hash link, scroll to top
    if (hash === '') {
      window.scrollTo(0, 0);
    }
    // else scroll to id
    else {
      setTimeout(() => {
        const id = hash.replace('#', '');
        const element = document.getElementById(id);
        if (element) {
          element.scrollIntoView();
        }
      }, 0);
    }
  }, [pathname,hash]); // do this on route change

  return (
      <Switch>
        <Route exact path="/" component={Home} />
        .
        .
      </Switch>
  )
}

export default App;

In the component

<Link to="/#home"> Home </Link>

Also, you have to use to prop inside Link instead of href. https://reactrouter.com/web/api/Link