How to dynamically register routes based on backend API response data

[json-q]

I have a SPA project where route information is retrieved from the database and registered dynamically. The frontend only has basic pages like 404, login, etc. by default. For example, I receive route data like this from the backend:

const interfaceRoutes = [
  {
    path: "/system",
    redirect: "noRedirect",
    component: "Layout",
    meta: {
      title: "System Management",
      icon: "system",
    },
    children: [
      {
        path: "user",
        component: "system/user/index",
        meta: {
          title: "User Management",
          icon: "user",
        },
      },
    ],
  },
  // ...
];

When users have admin privileges, I need to dynamically register these routes. However, when using File-based Routes, I cannot control the route registration process. Perhaps I can try to solve it using code-based routing. However, I prefer the file-based route.

If there is a solution, I would be extremely grateful.

[travisbreaks]

File-based routing generates the route tree at build time, so you can't conditionally register routes at runtime. But for your use case (backend-driven admin panel), you probably don't need to.

The pattern most admin panels use: register all routes statically in the file tree, gate access with beforeLoad permission checks, and build the sidebar/menu from your backend config. The backend controls what users see, not what routes exist.

// routes/system/user.tsx
export const Route = createFileRoute('/system/user')({
  beforeLoad: async ({ context }) => {
    if (!context.auth?.hasPermission('system:user')) {
      throw redirect({ to: '/403' })
    }
  },
})

Your component: "system/user/index" string mapping from the backend becomes an index into a static component registry on the frontend. The registry maps those strings to lazy components.

If routes are truly dynamic (CMS pages, user-created content where the shape is unknown at build time), a splat route (/admin/$) with a componentRegistry lookup works. But for a permissions-based admin panel with known page types, static routes + guards is cleaner and keeps TanStack Router's type safety intact.

[json-q]

I would prefer a solution similar to addRoutes in vue-router or patchRoutes in react-router. My goal is to have the frontend handle route registration dynamically based on received data, where access control for different roles is driven by database configuration.

If there is no better solution, I will choose Option 1. Thanks for your help.