React Router enter from route

Question

I have a static website hosted on GitHub pages and I'm using React Router v6 in my website to handle routing to dynamically generated web pages. The issue I'm running into is that if I visit a route (i.e. root/child) without first visiting root I get a 404. This sort of makes sense since my website on GitHub pages starts at root and there is technically no webpage at root/child hosted by GitHub Pages. How can I get around this and have links to root/child work?

I am building my webpage using Vite and I'm statically generating the website, then pushing the content to GitHub Pages.

I'm using createBrowserRouter with a setup that looks like this:

const router = createBrowserRouter([
  {
    path: "/root/",
    element: <Root />,
    errorElement: <ErrorPage fromArtifact={false} />,
    loader: () => artifacts,
  },
  {
    path: "/root/:id",
    element: <ArtifactPage />,
    errorElement: <ErrorPage fromArtifact />,
    loader: ({ params }) =>
      artifacts.find((artifact: ArtifactData) => artifact.id === params.id),
  },
]);

Thanks!