Matching Route dynamically to retrieve staticData

react

I want to colocate the data for generating OG images with the

Route

Route

definitions:

export const Route = createFileRoute("/")({
  component: Home,
  staticData: {
    customData: {
      ogImage: {
        title: "Home",
        description: "Welcome to our site",
        accentColor: "#699332",
      },
    },
  },
});

export const Route = createFileRoute("/")({
  component: Home,
  staticData: {
    customData: {
      ogImage: {
        title: "Home",
        description: "Welcome to our site",
        accentColor: "#699332",
      },
    },
  },
});

Then in my OG image API route (

/api/og/$

/api/og/$

), I want to dynamically access this data based on the path:

// What I want to do:
const route = router.getRouteByPath("/about");
const ogConfig = route?.options.staticData?.customData?.ogImage;

// What I want to do:
const route = router.getRouteByPath("/about");
const ogConfig = route?.options.staticData?.customData?.ogImage;

Currently, I have to manually import each route and maintain a mapping:

import { Route as HomeRoute } from "@/routes/_landing/index";
import { Route as AboutRoute } from "@/routes/_landing/about";
// ... etc

const pageConfigs = {
  home: HomeRoute.options.staticData?.customData?.ogImage,
  about: AboutRoute.options.staticData?.customData?.ogImage,
  // ... etc
};

import { Route as HomeRoute } from "@/routes/_landing/index";
import { Route as AboutRoute } from "@/routes/_landing/about";
// ... etc

const pageConfigs = {
  home: HomeRoute.options.staticData?.customData?.ogImage,
  about: AboutRoute.options.staticData?.customData?.ogImage,
  // ... etc
};

Is there a way to dynamically resolve a route by its path to access its
staticData
staticData
? Or is manually importing each route the intended pattern?

I've looked at

router.matchRoute()

router.matchRoute()

but it only returns params/false, not the route definition itself.

TanStack•4w ago•

1 reply

scornful-crimson

Matching Route dynamically to retrieve staticData

react

I want to colocate the data for generating OG images with the

Route

Route

definitions:

export const Route = createFileRoute("/")({
  component: Home,
  staticData: {
    customData: {
      ogImage: {
        title: "Home",
        description: "Welcome to our site",
        accentColor: "#699332",
      },
    },
  },
});

export const Route = createFileRoute("/")({
  component: Home,
  staticData: {
    customData: {
      ogImage: {
        title: "Home",
        description: "Welcome to our site",
        accentColor: "#699332",
      },
    },
  },
});

Then in my OG image API route (

/api/og/$

/api/og/$

), I want to dynamically access this data based on the path:

// What I want to do:
const route = router.getRouteByPath("/about");
const ogConfig = route?.options.staticData?.customData?.ogImage;

// What I want to do:
const route = router.getRouteByPath("/about");
const ogConfig = route?.options.staticData?.customData?.ogImage;

Currently, I have to manually import each route and maintain a mapping:

import { Route as HomeRoute } from "@/routes/_landing/index";
import { Route as AboutRoute } from "@/routes/_landing/about";
// ... etc

const pageConfigs = {
  home: HomeRoute.options.staticData?.customData?.ogImage,
  about: AboutRoute.options.staticData?.customData?.ogImage,
  // ... etc
};

import { Route as HomeRoute } from "@/routes/_landing/index";
import { Route as AboutRoute } from "@/routes/_landing/about";
// ... etc

const pageConfigs = {
  home: HomeRoute.options.staticData?.customData?.ogImage,
  about: AboutRoute.options.staticData?.customData?.ogImage,
  // ... etc
};

Is there a way to dynamically resolve a route by its path to access its
staticData
staticData
? Or is manually importing each route the intended pattern?

I've looked at

router.matchRoute()

router.matchRoute()

but it only returns params/false, not the route definition itself.

Matching Route dynamically to retrieve staticData

Similar Threads

Matching Route dynamically to retrieve staticData

Similar Threads

Similar Threads

Similar Threads