EDITED Trying to deploy a react-app on gh-pages and new pages links are giving a 404 error. No error messages. Deploys locally fine

Question

[UPDATED AFTER RECOMMENDATION TO USE GH-PAGES] I am running into issues depoloy a react-app to gh-pages with pathing/pages rendering. I'm using react-router-dom to create actual links to pages so that I can share the direct link to a specific page. I've set up all the Router, Routes, Route and Link tags and everything is working fine locally. But when it's deployed, those links are giving 404 errors and I cannot track down why.

Package.json

"homepage": "https://cpm-128.github.io/portfolio-react-router",

App.js

import React from 'react';
import PortfolioContainer from './components/PortfolioContainer';

// vdom rendering
function App() {
  return (
    <div>
      <PortfolioContainer />
    </div>
  );
}

export default App;

Portfolio Container

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import NavTabs from './NavTabs';
import Header from './Header';
import Footer from './Footer';

import About from './pages/About';
import Portfolio from './pages/Portfolio';
import Contact from './pages/Contact';
import Resume from './pages/Resume';
import Cycling from './pages/Cycling';

function PortfolioContainer() {

    return (
        // the basename will keep the entire homepage url, even with slugs
        <Router basename={process.env.PUBLIC_URL}>
            <div className='portfolio-container d-flex flex-column min-vh-100'>
                <NavTabs />
                <Header />

                <Routes>
                    {/* index */}
                    <Route
                        exact path='/'
                        element={<About />}
                    />
                    {/* repo name
                    <Route
                        exact path='/portfolio-react-router'
                        element={<About />}
                    /> */}
                    {/* About */}
                    <Route
                        path='/about'
                        element={<About />}
                    />
                    {/* Portfolio */}
                    <Route
                        path='/portfolio'
                        element={<Portfolio />}
                    />
                    {/* Contact */}
                    <Route
                        path='/contact'
                        element={<Contact />}
                    />
                    {/* Resume */}
                    <Route
                        path='/resume'
                        element={<Resume />}
                    />
                    {/* Cycling */}
                    <Route
                        path='/cycling'
                        element={<Cycling />}
                    />
                </Routes>

                <Footer />
            </div>
        </Router>
    )

};

export default PortfolioContainer;

NavTabs

import React from 'react';
import { Link } from 'react-router-dom';

function NavTabs({ currentPage, handlePageChange }) {
    return (
        <nav>

        <ul className='nav nav-tabs bg-color-primary'>

            {/* ABOUT */}
            <li className='nav-item'>
                <Link to='/about'
                    onClick={() => handlePageChange('About')}
                    className={currentPage === 'About'
                        ? 'nav-link active'
                        : 'nav-link'
                    }
                >
                    About
                </Link>
            </li>

            {/* PORTFOLIO */}
            <li className='nav-item'>
                <Link to='/portfolio'
                    onClick={() => handlePageChange('Portfolio')}
                    className={currentPage === 'Portfolio'
                        ? 'nav-link active'
                        : 'nav-link'
                    }
                >
                    Portfolio
                </Link>
            </li>

            {/* CONTACT */}
            <li className='nav-item'>
                <Link to='/contact'
                    onClick={() => handlePageChange('Contact')}
                    className={currentPage === 'Contact'
                        ? 'nav-link active'
                        : 'nav-link'
                    }
                >
                    Contact
                </Link>
            </li>

            {/* RESUME */}
            <li className='nav-item'>
                <Link to='/resume'
                    onClick={() => handlePageChange('Resume')}
                    className={currentPage === 'Resume'
                        ? 'nav-link active'
                        : 'nav-link'
                    }
                >
                    Resume
                </Link>
            </li>

            {/* CYCLING */}
            <li className='nav-item'>
                <Link to='/cycling'
                    onClick={() => handlePageChange('Cycling')}
                    className={currentPage === 'Cycling'
                        ? 'nav-link active'
                        : 'nav-link'
                    }
                >
                    Cycling
                </Link>
            </li>

        </ul>

        </nav>
    )
};

export default NavTabs;

[ORIGINAL] I'm trying to deploy a multipage React app to Heroku. After spending hours trying to work with GitHub pages for this, I realized gh-pages may be unable to render the components, so I moved to Heroku. The app works locally, but nothing is displaying on the Heroku app.

• I set the Heroku remote
• Node.js buildpack
• heroku buildpacks:set mars/create-react-app for a buildpack for React app that some internet resources suggested
• The Heroku app is using eco dynos

What am I missing? Nothing is rendering. I get no error messages, just that the deploy was successful.