useMatches and Typescript

[bnabet]

Hello,

I don't understand the data returned by the library. I'm looking to develop a breadcrumb but I'm having trouble trying to use it with Typescript.

Let's take a Home route like this :

<Route
  path="/"
  element={<Home />}
  handle={{
    infos: {
      title: "Home page"
    }
  }}
/>

And a component Breadcrumbs :

import { RouteObject, useMatches } from "react-router-dom";

function Breadcrumbs() {
  const matches: RouteObject[] = useMatches();

  const routesInfos = matches
    .filter((match) => Boolean(match.handle?.infos))
    .map((match) => {
      console.log(match);

      return {
        title: match.handle.infos.title,
        path: match.pathname
      };
    });
}

Here is the return of the match log.
First thing, we can see that path prop becomes pathname.

{
    "id": "0-0",
    "pathname": "/",
    "params": {},
    "handle": {
        "infos": {
            "title": "Home page"
        }
    }
}

But now i get a Typescript error.

What we can indeed confirm when we look at the types :

export interface IndexRouteObject {
    caseSensitive?: AgnosticIndexRouteObject["caseSensitive"];
    path?: AgnosticIndexRouteObject["path"];
    id?: AgnosticIndexRouteObject["id"];
    loader?: AgnosticIndexRouteObject["loader"];
    action?: AgnosticIndexRouteObject["action"];
    hasErrorBoundary?: AgnosticIndexRouteObject["hasErrorBoundary"];
    shouldRevalidate?: AgnosticIndexRouteObject["shouldRevalidate"];
    handle?: AgnosticIndexRouteObject["handle"];
    index: true;
    children?: undefined;
    element?: React.ReactNode | null;
    errorElement?: React.ReactNode | null;
}

So I find myself stuck.
I have to define the matches as RouteObject but the matches returns me pathname while it expects a path.

Sorry if my explanation is not very clear and thank you in advance for your help.

Have a nice day !

[drenther]

Facing issues typing this as well?

Is there a good workaround for this?

[bnabet]

Thank you for your comment.

I have not found any other solution than to completely rethink my component. I think the basis of my problem is a wrong imported type. But the documentation for Typescript is so poor...

I'm still looking for the correct solution.

[penx]

Try something like this:

type RouteWithHandle<Handle extends string, Value> = {
  id: string;
  pathname: string;
  params: Params<string>;
  data: unknown;
  handle: Record<Handle, Value>;
};

function isRecordWithKey<T extends string>(
  value: unknown,
  key: T,
): value is Record<T, unknown> {
  return !!value && typeof value === "object" && key in value;
}

function hasHandle<Handle extends string, Value>(
  handle: Handle,
  valuePredicate?: (v: unknown) => v is Value,
) {
  return (
    route:
      | {
          handle: unknown;
        }
      | RouteWithHandle<Handle, Value>,
  ): route is RouteWithHandle<Handle, Value> => {
    return (
      !!route.handle &&
      isRecordWithKey(route.handle, handle) &&
      (!valuePredicate ||
        (handle in route.handle && valuePredicate(route.handle[handle])))
    );
  };
}

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function MyComponent() {
  const matches = useMatches();
  const routesInfos = matches.filter(hasHandle("infos", isString)).map(match => match.handle.infos);
}

playground

[brophdawg11]

useMatches does not return RouteObject[], but since they share some properties TS is allowing you to incorrectly define the type that way. A "match" in this case is a mixtures of a matched route and the result of the routes loader function, so just remove : RouteObject[] and TS should be happy:

[brophdawg11]

It's hard to say without seeing your code. useMatches does not have an infos field on it if that's what you're trying to do. Maybe you want to look for match.data.infos?