Fix useMatches

packages/remix-react/components.tsx

@@ -29,6 +29,7 @@ import {
   useFetcher as useFetcherRR,
   useActionData as useActionDataRR,
   useLoaderData as useLoaderDataRR,
+  useMatches as useMatchesRR,
   useLocation,
   useNavigation,
   useHref,
@@ -874,7 +875,7 @@ export function useBeforeUnload(
   }, [callback]);
 }
 
-// TODO: Handle this typing
+// TODO: Can this be re-exported from RR?
 export interface RouteMatch {
   /**
    * The id of the matched route
@@ -893,7 +894,7 @@ export interface RouteMatch {
   /**
    * Any route data associated with the matched route
    */
-  data: RouteData;
+  data: any;
   /**
    * The exported `handle` object of the matched route.
    *
@@ -902,6 +903,23 @@ export interface RouteMatch {
   handle: undefined | { [key: string]: any };
 }
 
+export function useMatches(): RouteMatch[] {
+  let { routeModules } = useRemixContext();
+  let matches = useMatchesRR();
+  return matches.map((match) => {
+    let remixMatch: RouteMatch = {
+      id: match.id,
+      pathname: match.pathname,
+      params: match.params,
+      data: match.data,
+      // Need to grab handle here since we don't have it at client-side route
+      // creation time
+      handle: routeModules[match.id].handle,
+    };
+    return remixMatch;
+  });
+}
+
 /**
  * Returns the JSON parsed data from the current route's `loader`.
  *

packages/remix-react/index.tsx

@@ -16,7 +16,6 @@ export {
   useFormAction,
   useHref,
   useLocation,
-  useMatches,
   useNavigate,
   useNavigationType,
   useOutlet,
@@ -44,6 +43,7 @@ export {
   useTransition,
   useFetcher,
   useLoaderData,
+  useMatches,
   useActionData,
   useBeforeUnload,
 } from "./components";