Breadcrumbs example

[knpwrs]

Does anyone have an example of how one might produce automatically-generated breadcrumbs in Solid Start? In Remix I would use export const meta to export some metainformation (like a breadcrumb title) and then in a top-level layout I could take all of that along with the associated href values and assemble breadcrumbs.

So far I'm thinking I would have to store some sort of map for this meta information in a layout breadcrumbs component and have it use useLocation() to determine what to render.

[knpwrs]

I wound up with something like this:

import {
  Accessor,
  createContext,
  createSignal,
  For,
  onCleanup,
  onMount,
  ParentProps,
  Show,
  useContext,
} from 'solid-js';
import { A } from 'solid-start';

type Crumb = {
  title: string;
  href: string;
};

const BreadcrumbContext =
  createContext<
    readonly [
      Accessor<Array<Crumb>>,
      { addCrumb: (crumb: Crumb) => void; removeCrumb: (crumb: Crumb) => void },
    ]
  >();

export function BreadcrumbProvider(props: ParentProps) {
  const [crumbs, setCrumbs] = createSignal<Array<Crumb>>([]);

  const value = [
    crumbs,
    {
      addCrumb(crumb: Crumb) {
        setCrumbs((a) => [...a, crumb]);
      },
      removeCrumb({ title, href }: Crumb) {
        setCrumbs((a) => a.filter((c) => c.title !== title && c.href !== href));
      },
    },
  ] as const;

  return (
    <BreadcrumbContext.Provider value={value}>
      {props.children}
    </BreadcrumbContext.Provider>
  );
}

export function useCrumb(crumb: Crumb) {
  const [, { addCrumb, removeCrumb }] = useContext(BreadcrumbContext)!;

  onMount(() => addCrumb(crumb));
  onCleanup(() => removeCrumb(crumb));
}

export default function PageBreadcrumbs() {
  const [crumbs] = useContext(BreadcrumbContext)!;

  const lastCrumb = () => {
    const list = crumbs();

    return list[Math.max(list.length - 1, 0)];
  };

  const initialCrumbs = () => {
    const list = crumbs();

    return list.slice(0, -1);
  };

  return (
    <Show when={crumbs().length > 1}>
      {/* render breadcrumbs */}
    </Show>
  );
}

In my route components I just call useCrumb and the breadcrumbs are populated. This implementation has a few problems though:

1. onMount isn't called on the server, so the server-rendered page doesn't have any breadcrumbs and they pop-in on the client
2. Even without onMount (just calling useCrumb directly inside the component) it doesn't appear to render the breadcrumbs on the server.

Does anyone have any ideas on how to update this to be SSR-friendly?

[atk]

If you are on the server, instead of using lifecycle events, store the current crumbs in the request event immediately, and forgo the cleanup.

[knpwrs]

Are there any examples of what it looks like to store data on the request event? Like, literally just setting a property? And that data will be readable in time for rendering the crumbs?

[atk]

The event should be the same object for all of one request.

[skotchpine]

Recently I used useCurrentMatches to achieve something like this.

Here's a hint in the docs: https://docs.solidjs.com/solid-router/reference/primitives/use-current-matches

Simple Example

<Route path="/" component={() => <></>} info={{breadcrumb: "content"}} />

// ...

const matches = useCurrentMatches()
console.log(matches()) // Find info yourself in the console

More Realistic Example

You can inject an any into a route's info prop (called crumb here) like this:

<Route
  path="/"
  component={() => {
    const params = useParams()

    return <h1>Hello, {params.name}!</h1>
  }}
  info={{crumb: (params) => <>{params.name}</>}} />

Then you can use it anywhere under <Router> (i.e. in your root layout) like this:

const params = useParams()
const matches = useCurrentMatches()

const crumbs = createMemo(() =>
  matches().map((match) =>
    match.info.crumb({name: params.name})))

return <ul>
  <For each={crumbs()}>{(crumb) =>
    <li>/ {crumb}</li>
  }</For>
</ul>