remix.run meta，从父路线获取信息

发布于 2025-02-11 09:30:35 字数 581 浏览 3 评论 0原文

我有一个混音中的嵌套路线，我想拥有与父母相同的元信息。我假设，如果没有meta属性是从路线导出的，那么混音将沿链条上升，直到它扎根。

但是，情况似乎并非如此。我已经检查了meta调用的ARG，虽然有parentsdata - 这只是父loader函数的数据，而不是父级<代码> meta 。

理想情况下，我想为我的根路线的元素提供如下的元素

export const meta: MetaFunction = (): HtmlMetaDescriptor => ({
  title: 'My App',
});

，并且在嵌套路线中可以做以下操作：

export const meta: MetaFunction = (args): HtmlMetaDescriptor => ({
  title: `${args.parentsData.title} | My Route`,
})

我缺少一些我缺少的事情，还是一些可以让我完成此操作的惯例？

原文

I have a nested route in Remix that I want to have *mostly the same meta information as its parent. I would assume that if no meta property is exported from the route, then Remix would go up the chain until it gets to the root.

This does not appear to be the case, however. I have inspected the args available to the meta call and while there is parentsData - this is just the data from parent loader functions, not parent meta.

Ideally, I'd like to have for my root route's meta something like the following

export const meta: MetaFunction = (): HtmlMetaDescriptor => ({
  title: 'My App',
});

and in nested routes be able to do something like the following:

export const meta: MetaFunction = (args): HtmlMetaDescriptor => ({
  title: `${args.parentsData.title} | My Route`,
})

Is there something that I'm missing, or some convention that would allow me to accomplish this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

枯叶蝶 2025-02-18 09:30:35

使用Remix V2

您绝对可以消耗loader和meta从任何嵌套子路由中同一层次结构中的任何父路由导出。

使用匹配参数如下所示，您可以获取所有父级数据：

export const meta: MetaFunction = ({ matches }) => {
  // this matches array have all the things that all your parents routes export
  console.log(matches);
};

在我的情况下，输出是：

[
  {
    id: 'root',
    data: null,
    meta: [],
    params: { id: '6603feabeaf855326279ab28' },
    pathname: '/',
    handle: undefined,
    error: null
  },
  {
    id: 'routes/desk',
    data: { userId: '652675dc7ad78fd3746a7f73' },
    meta: [],
    params: { id: '6603feabeaf855326279ab28' },
    pathname: '/desk',
    handle: undefined,
    error: null
  },
  {
    id: 'routes/desk.bilties',
    data: { bilties: [Array] },
    meta: [],
    params: { id: '6603feabeaf855326279ab28' },
    pathname: '/desk/bilties',
    handle: undefined,
    error: null
  },
  {
    id: 'routes/desk.bilties.$id',
    data: { bilty: [Object] },
    meta: [ [Object], [Object], [Object] ],
    params: { id: '6603feabeaf855326279ab28' },
    pathname: '/desk/bilties/6603feabeaf855326279ab28',
    handle: undefined,
    error: null
  },
  {
    id: 'routes/desk.bilties.$id._index',
    data: null,
    meta: [],
    params: { id: '6603feabeaf855326279ab28' },
    pathname: '/desk/bilties/6603feabeaf855326279ab28/',
    handle: undefined,
    error: null
  }
]

从docs（ https://remix.run/docs/en/main/route/meta#matches ）：

这是当前路由匹配的数组。您可以访问许多
事物，尤其是父母匹配和数据的元。

现在，可以使用与子元功能的父元合并并导出的父元可以满足您的要求。这可以通过两种方式完成：

食用父数据和导出儿童路由的元功能
过滤器匹配数据并与Child Route的Meta功能导出合并
注意：无论如何，您需要从儿童路线中导出新的元数组，

您应该关注文档。他们还具有具有辅助功能的GIST，可以自动单纯的母体元：

https：> https： //remix.run/docs/en/main/start/v2#route-meta （v2中的元函数签名从对象转换为array）
https://remix.run/docs/en/main/main/main/route/meta#mering-with-mering-with-parent-parent-parent-meta
https://remix.run/docs/docs/en/主/路线/meta＃元融合馆

With Remix v2

You can definitely consume loader and meta exported from any parent route in the same hierarchy in any nested child route.

Using matches paramter as shown below, you can get all your parent data:

export const meta: MetaFunction = ({ matches }) => {
  // this matches array have all the things that all your parents routes export
  console.log(matches);
};

In my case output was:

[
  {
    id: 'root',
    data: null,
    meta: [],
    params: { id: '6603feabeaf855326279ab28' },
    pathname: '/',
    handle: undefined,
    error: null
  },
  {
    id: 'routes/desk',
    data: { userId: '652675dc7ad78fd3746a7f73' },
    meta: [],
    params: { id: '6603feabeaf855326279ab28' },
    pathname: '/desk',
    handle: undefined,
    error: null
  },
  {
    id: 'routes/desk.bilties',
    data: { bilties: [Array] },
    meta: [],
    params: { id: '6603feabeaf855326279ab28' },
    pathname: '/desk/bilties',
    handle: undefined,
    error: null
  },
  {
    id: 'routes/desk.bilties.$id',
    data: { bilty: [Object] },
    meta: [ [Object], [Object], [Object] ],
    params: { id: '6603feabeaf855326279ab28' },
    pathname: '/desk/bilties/6603feabeaf855326279ab28',
    handle: undefined,
    error: null
  },
  {
    id: 'routes/desk.bilties.$id._index',
    data: null,
    meta: [],
    params: { id: '6603feabeaf855326279ab28' },
    pathname: '/desk/bilties/6603feabeaf855326279ab28/',
    handle: undefined,
    error: null
  }
]

From the docs (https://remix.run/docs/en/main/route/meta#matches):

This is an array of the current route matches. You have access to many
things, particularly the meta from the parent matches and data.

Now your requirement can be satisfied using parent meta merged and exported from child meta function. This can be done in 2 ways:

consuming parent data and exporting child route's meta function
filter matches data and merge with child route's meta function export
Note: in any case you need to export the new meta array from child route

You should follow the docs. They have also a gist with helper function to automatically mere parent meta: