React router / 404 not found

FiveM Resource Development & Modding Discussion
1

I’ve used react on some other scripts before, and this is the first time using react router with fivem, and I keep getting 404 not found when i render the page

image

Here is the code

const routes: RouteObject[] = [
  {
    path: "/",
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Dashboard />,
      },
      {
        path: "/settings",
        element: <Settings />,
      },
    ],
  },
];
const router = createBrowserRouter(routes);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <VisibilityProvider>
      <RouterProvider router={router} />
    </VisibilityProvider>
  </React.StrictMode>,
);

when i Replace with a normal component for example it render just fine

2

I found a solution

I replaced “/” in the path with the path to the complied index.html
in my case was “/web/dist/index.html”

const routes: RouteObject[] = [
  {
    path: "/web/dist/index.html",
    element: <AppLayout />,
    children: [
      {
        path: "/web/dist/index.html",
        element: <Dashboard />,
      },
      {
        path: "/web/dist/index.html/settings",
        element: <Settings />,
      },
    ],
  },
];
3

Would it be better to use the hash router instead?