xenophobic-harlequin

Can I add custom information to RouteOptions?

I'm using TanStack Router with file-based routing and I'd like to dynamically generate my menu from the route tree. In order to do this, I need to have some extra metadata for each route (i.e. title, sort, etc.). Is it possible to add some extra information when calling createFileRoute (or createLazyFileRoute) that I can then access from the route tree data from useRouter or similar? Something like this, perhaps?

export const Route = createFileRoute('/')({
  component: Page,
  meta: { //<-- This is what I want
    title: "Home",
  },
})

export const Route = createFileRoute('/')({
  component: Page,
  meta: { //<-- This is what I want
    title: "Home",
  },
})

I've looked all over and can't seem to find info dynamically generating the menu. Maybe I'm missing something or going about it the wrong way?

5 Replies

magic-amber•8mo ago

I would suggest to enable autoCodeSplitting and not use manual lazy

xenophobic-harlequinOP•8mo ago

That was just an example that I happened to have on hand. Not really what I was asking about. 😅

magic-amber•8mo ago

oh sorry I thought the fact that lazy file route has only a subset of the options was the issue here

magic-amber•8mo ago

this should help then: https://tanstack.com/router/v1/docs/framework/react/guide/static-route-data

Static Route Data | TanStack Router React Docs

When creating routes, you can optionally specify a staticData property in the route's options. This object can literally contain anything you want as long as it's synchronously available when you crea...

xenophobic-harlequinOP•8mo ago

Ah, that looks perfect. Thank you!

Gaming

Programming

Can I add custom information to RouteOptions?

Did you find this page helpful?