My problem was that I was stubbornly trying to implement createBrowserRouter that is essentially not compatible with my scenario.

Thanks to the comment by @DrewReese I switched to createHashRouter

import { createHashRouter } from "react-router-dom";
import { HomeView } from "./views/home";
import { SceneryView } from "./views/scenery";
import { NotFoundView } from "./views/not-found";
import { DefaultLayout } from "./layouts/default-layout";
import { PatientView } from "./views/patient";
import { PatientEndView } from "./views/patient-end";
import { CompletedView } from "./views/completed";

const router = createHashRouter([
  {
    path: "/",
    element: <DefaultLayout />,
    children: [
      {
        index: true,
        element: <HomeView />,
      },
      {
        path: "decision-pathways/scenery/:id",
        element: <SceneryView />,
      },
      {
        path: "decision-pathways/patient/:sceneryId/:patientId",
        element: <PatientView />,
      },
      {
        path: "decision-pathways/patient/end/:sceneryId/:patientId",
        element: <PatientEndView />,
      },
      {
        path: "decision-pathways/completed",
        element: <CompletedView />,
      },
    ],
  },
  {
    path: "*",
    element: <NotFoundView />,
  },
]);

export default router;

What's the difference? Basically createHashRouter add an hashtag before react "internal" route. In this way the web server ignores whatever is after that hashtag and resolves always to the same file, in this case my index.html.

For the resources all that is needed to change the paths to relative ones is this line in vite.config.js:

base: "./"