React-router not working when uploaded to github pages

Inro

Hi all, I’ve recently built my first react application after studying react at home I am having some trouble with the react router DOM. Currently on week number 3 of wrestling with this issue, I’ve been all over the net searching for a solution and nothing will work for me.

App.JS

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import './App.css';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Home from './pages/Home';
import LandingPage from './pages/LandingPage';

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="AppName/" element={<LandingPage />} />
        <Route path="AppName/home" element={<Home />} />
      </Routes>
      <Footer/>
    </>
  );
}

export default App;

Background

My app works perfectly when run locally using npm start. I have deployed it to gh-pages and it is run on “https://myusername.github.io/AppName/”. LandingPage component loads at this url as it is set to path=AppName/ with element=LandingPage. Within this element, there is a login button that redirects the user to a Spotify API auth with a redirect uri set to “https://myusername.github.io/AppName/home”, this loads a blank webpage wherein the Home component is not loaded, other solutions have lead me to a GitHub 404 page not found. When I change to element=Home at pathname=/AppName, the Home component loads. Again, I want to stress, this all works perfectly when run locally (once relevant stuff is changed i.e redirect_uris etc). The gh-pages is where the problem occurs once it’s hosted at https://myusername.github.io/AppName/.

Solutions I’ve Tried

I have read that this is an issue with react-router-dom and that a HashRouter is needed, I have tried this also with no luck. I have tried a lot of pathname and rout path varieties, I have updated react-router-dom version, I have tried a custom 404 page workaround with a redirect script, adding different basenames, wrapping in a BrowserRouter etc… I can’t seem to solve this problem, I also want to mention the app will be hosted on a custom domain but for now I want to at least get working on https://myusername.github.io/AppName/.