React Router Not Working when running npm build and serving, but is when running npm start

Edit:

After testing through running 'npm run build' and then serving that locally with 'serve -s build' I realised the Nav Links from react-router don't work, but when using 'npm start' the Nav Links work fine. This means it was not an issue with Vercel or any kind of production configuration. But I can't figure out why this difference is - my app only contains a .env file with

REACT_APP_API_URL=https://ift.tt/HT40EaB

#REACT_APP_API_URL=http://localhost:8080

and no other environment variables are used on the frontend that could be affected by dev vs production. I've also tried changing my "homepage": ".", to a dot, and just "". The thing is, the routing works, since I click on it -> /about nothing happens, but when I refresh it works and it brings up the AboutPage component.

I also thought it could be service workers, but that lead to nothing seeing as there is no ServiceWorkers.js file or anything similar in the build directory, or in the service workers tab in applications tab of console.

I've deployed a React application on Vercel, and I'm encountering an issue where <Link> components from react-router-dom are not functioning as expected. When I click on these links, the URL changes, but the page content does not update. This issue is not present in my local development environment, where navigation works correctly.

The issue occurs only in the production build on Vercel and when I click on a <Link> it changes the URL but does not navigate to the new page, and no network requests or console errors appear when I click on the links.

1. Navbar Component (using <LinkContainer> from react-router-bootstrap):

import React from "react";
import { LinkContainer } from 'react-router-bootstrap';
import {Navbar, Nav, Image} from 'react-bootstrap';
import logo from '../assets/logo.svg';

import '../css/Navbar.css';

const LPNavBar = () => {
    return (
        <Navbar expand="lg" style=>
            <LinkContainer to="/home">
                <Navbar.Brand className="navbar-brand-margin custom-logo">
                    <Image
                        src={logo}
                        width="30"
                        height="30"
                        className="d-inline-block align-top"
                        alt="Logo"
                    />
                </Navbar.Brand>
            </LinkContainer>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
                <Nav>
                    <LinkContainer to="/">
                        <Nav.Link className="nav-link nav-link-text">Home</Nav.Link>
                    </LinkContainer>
                    <LinkContainer to="/about">
                        <Nav.Link className="nav-link nav-link-text">About</Nav.Link>
                    </LinkContainer>
                    <LinkContainer to="/sign-up">
                        <Nav.Link className="nav-link nav-link-text">Register</Nav.Link>
                    </LinkContainer>
                    <LinkContainer to="/login">
                        <Nav.Link className="nav-link nav-link-margin nav-link-text">Login</Nav.Link>
                    </LinkContainer>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
};

export default LPNavBar;





AppRouter: 

    import React from 'react';
    import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
    
    import HomePage from './pages/HomePage';
    import UserProfilePage from './pages/UserProfilePage';
    import LandingPage from './pages/LandingPage';
    ... other imports
    import PaymentCancelledPage from "./pages/PaymentCancelledPage";
    import ContactPage from "./pages/ContactPage";
    
    const AppRouter = () => {
        return (
            <Router>
                <Routes>
                    <Route path="/" element={<LandingPage />} />
                    <Route path="/home" element={<HomePage />} />
                    <Route path="/profile/:userId" element={<UserProfilePage />} />
                    ...
                    <Route path="/payment-cancelled" element={<PaymentCancelledPage />} />
                    <Route path="/contact" element={<ContactPage />} />
                </Routes>
            </Router>
        );
    };
    
    export default AppRouter;

And the truly perplexing thing is that in my project's root directory on Github repo, in the branch connected to Vercel there is the vercel.json file 
that should resolve this problem: 


    .idea
    public
    src
    .env
    .env.production
    .gitignore
    README.md
    htmltos.txt
    package-lock.json
    package.json
    tsandcs.txt
    vercel.json

,     vercel.json:

      {
      "rewrites":  [
        {"source": "/(.*)", "destination": "/"}
      ]
    },

There is no console output, or network requests when clicking on any of the navlinks. The only thing that changes, is the URL correctly, but the state doesn't change/no redirect.  


The url could be / for the home page, and then I click About and the url becomes /about but nothing else changes. However, React Router works for all other parts, if I type /about it redirects to the /about route that is defined in the AppRouter.js file.

from React Router Not Working when running npm build and serving, but is when running npm start