get pending matches

[nicksrandall]

While the router is navigating from one route to another (calling loaders, ect...) I would like to know what (if any) routes are pending.

My exact use case is that while the loaders are being called, I would like to setup the <link rel="stylesheet" href="..." /> for each pending route so that styles are ready before the new routes mount.

Basically, I want a usePendingMatches() hook which is the exact same as useMatches hook but it only returns "pending" routes.

Is it possible to use RR v6.4's public api to create such a hook for myself?

[nicksrandall]

Here is what I have come up with:

const usePendingMatches = () => {
  const location = useLocation();
  const { router } = useContext(DataRouterContext);
  const routerState = useContext(DataRouterStateContext);
  const nextLocation = routerState?.navigation.location;
  const nextPath = useResolvedPath(nextLocation || "");
  const nextMatches = useMemo(() => matchRoutes(router.routes, nextPath), [router, nextPath]);
  const isMatch = matchPath({ path: location.pathname, end: true }, nextPath.pathname);
  if (!isMatch) {
    return nextMatches;
  }
  return []
}

[ryanflorence]

Yeah, it's a little weird how we've got a handful of hooks for bits of information at a route, and the same information is available for the pending navigation but only in a few places like useNavigation and the callback to NavLink styles/className.

The obvious but gross answer is to just have a hook for everything but it's the "pending" version.

current	pending
useMatches	usePendingMatches
useLocation	usePendingLocation
useParams	usePendingParams
useSearchParams	usePendingSearchParams

I'm not pumped about that idea though.

Another quick thought is maybe you tell it you want the pending stuff?

current	pending
useMatches()	useMatches("pending")
useLocation()	useLocation("pending")

Keeps the API surface from exploding, I still don't love it though.

---

Since the idea of "pending" is new, maybe the old APIs aren't the right abstraction anymore? Maybe useNavigation should have everything on it? Like navigation.current.location and navigation.pending.location?

Or maybe we need a big fat useRouter() and that gives you access to the safe bits of the router you pass to <RouterProvider router={thisThing} />?

Anybody got ideas for a better API to access this stuff?

[nicksrandall]

I don't have strong preferences on the API as long as I can get the data I need. That's said, my vote would be the option where we create a pending variant of all the relevant hooks. The benefit is that I get to use all my current api knowledge and directly apply it to this new use-case.