Inspired by Remix's export meta feature: https://remix.run/docs/en/v1/route/meta
Essentially you can export a meta function from route components, and then higher up in the component tree use useMatches to get all of the matching meta functions and use the data.
Two example use cases come to mind:
- Breadcrumbs (example on this page). Route component files can return
title and href properties from their meta functions. A parent component can get all of these results and render breadcrumbs.
- Shared layout titles. Similar to breadcrumbs, basically just getting a title for whatever is being rendered inside of
<Outlet /> and rendering it in a consistent way for all child routes.
Inspired by Remix's
export metafeature: https://remix.run/docs/en/v1/route/metaEssentially you can export a
metafunction from route components, and then higher up in the component tree useuseMatchesto get all of the matchingmetafunctions and use the data.Two example use cases come to mind:
titleandhrefproperties from theirmetafunctions. A parent component can get all of these results and render breadcrumbs.<Outlet />and rendering it in a consistent way for all child routes.