Replies: 3 comments 1 reply
-
This would really help interpreting breadcrumbs. |
Beta Was this translation helpful? Give feedback.
-
I've added |
Beta Was this translation helpful? Give feedback.
-
I've dug around to see how this might work. I'll share what I've learned so far in case it helps anyone. Sadly, I can't figure out why this doesn't work with Say we're doing a blog, and this is a post: export const route = {
info: {
title: "Best Blog Post",
description: "Maybe",
},
};
export default function BestPost(props: any) {
return <div>Latin, or something</div>;
} And here's the layout file: import type { RouteSectionProps } from "@solidjs/router";
import { useCurrentMatches } from "@solidjs/router";
export default function BlogLayout(props: RouteSectionProps) {
const matches = useCurrentMatches();
// Roll up all the info objects from the matched routes into a single object
const info = matches.reduce((acc, m) => {
return { ...acc, ...m.route.info };
}, {}) as any;
return (
<div>
<h1>Posts</h1>
<h2>{info.title}</h2>
<p>{info.description}</p>
{props.children}
</div>
);
} This works. The reduce will roll up the I don't understand why when using |
Beta Was this translation helpful? Give feedback.
-
Inspired by Remix's
export meta
feature: https://remix.run/docs/en/v1/route/metaEssentially you can export a
meta
function from route components, and then higher up in the component tree useuseMatches
to get all of the matchingmeta
functions and use the data.Two example use cases come to mind:
title
andhref
properties from theirmeta
functions. A parent component can get all of these results and render breadcrumbs.<Outlet />
and rendering it in a consistent way for all child routes.Beta Was this translation helpful? Give feedback.
All reactions