接口 MetaFunction<Loader, MatchLoaders>

一个函数,返回一个数据对象数组,用于在路由中渲染元数据 HTML 标签。这些标签不会在路由层级结构中的后代路由上渲染。换句话说,它们只会渲染在导出它们的路由上。

类型参数

  • Loader extends LoaderFunction | ClientLoaderFunction | unknown = unknown

    当前路由加载器函数的类型

  • MatchLoaders extends Record<string, LoaderFunction | ClientLoaderFunction | unknown> = Record<string, unknown>

    从父路由文件路径到其加载器函数类型的映射

    请注意,父路由文件路径是相对于 app/ 目录的。

    例如,如果此元函数用于 /sales/customers/$customerId

    // app/root.tsx
    const loader = () => ({ hello: "world" })
    export type Loader = typeof loader

    // app/routes/sales.tsx
    const loader = () => ({ salesCount: 1074 })
    export type Loader = typeof loader

    // app/routes/sales/customers.tsx
    const loader = () => ({ customerCount: 74 })
    export type Loader = typeof loader

    // app/routes/sales/customers/$customersId.tsx
    import type { Loader as RootLoader } from "../../../root"
    import type { Loader as SalesLoader } from "../../sales"
    import type { Loader as CustomersLoader } from "../../sales/customers"

    const loader = () => ({ name: "Customer name" })

    const meta: MetaFunction<typeof loader, {
    "root": RootLoader,
    "routes/sales": SalesLoader,
    "routes/sales/customers": CustomersLoader,
    }> = ({ data, matches }) => {
    const { name } = data
    // ^? string
    const { customerCount } = matches.find((match) => match.id === "routes/sales/customers").data
    // ^? number
    const { salesCount } = matches.find((match) => match.id === "routes/sales").data
    // ^? number
    const { hello } = matches.find((match) => match.id === "root").data
    // ^? "world"
    }