I’ve looked at many similar posts on issues which appear to be the same but I’m not finding anything that’s worked for me. Please help!

I have a personal site that I built using React. It is hosted on GitHub Pages, deployed using the gh-pages dependency and command npm run deploy. Due to this deployment method, I don’t have an actual YAML file.

I am using React Router to route around the site via an outlet. Here is how that is set up in my code:

App.jsx (contains)

export default function App() {
    return (
        <div className="App">
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route index element={<Landing />} />
                    <Route path="work/" element={<Work />} />
                    <Route path="about/" element={<About />} />
                    <Route path="contact/" element={<Contact />} />
                    <Route path="*" element={<Invalid />} />
                </Route>
            </Routes>
        </div>
    );
}

Index.js (contains)

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

As you can see there is a layout page at path="/" which contains the element <Outlet />.

The site is being hosted at <<some_domain>>.com.

Here is the issue

If I navigate to <<some_domain>>.com, I get the website and I am able to click the navlinks to navigate around. As I navigate around the url path accordingly changes to .com/work/ or .com/about/ etc.

If I try to navigate directly to .com/work or .com/work/ or any of the other subpages, I get a 404 error from GitHub pages. I’ve tried a lot of things and I’m stumped!

What else is weird is that I don’t encounter this issue in the dev environment on localhost. Only the deployed environment has this issue.

HashRouter

This puts a /#/ in my path, which I don’t want.

Adding "homepage": "<<urlname>>", to package.json

Its there. Didn’t change anything.

Messing with Jekyll

I’ve seen suggestions for this but I remain a little unclear on exactly what to change and how. the gh-pages dependency and process kind of masks all of this from me.

Totally open to any and all suggestions!!