@tanstack/react-router 1.5.4 → 1.5.6

package/build/umd/index.development.js

@@ -359,6 +359,160 @@
     }
   }
 
+  exports.routerContext = /*#__PURE__*/React__namespace.createContext(null);
+  if (typeof document !== 'undefined') {
+    if (window.__TSR_ROUTER_CONTEXT__) {
+      exports.routerContext = window.__TSR_ROUTER_CONTEXT__;
+    } else {
+      window.__TSR_ROUTER_CONTEXT__ = exports.routerContext;
+    }
+  }
+
+  function useRouter(opts) {
+    const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || exports.routerContext : exports.routerContext;
+    const value = React__namespace.useContext(resolvedContext);
+    warning(!((opts?.warn ?? true) && !value), 'useRouter must be used inside a <RouterProvider> component!');
+    return value;
+  }
+
+  function defer(_promise) {
+    const promise = _promise;
+    if (!promise.__deferredState) {
+      promise.__deferredState = {
+        uid: Math.random().toString(36).slice(2),
+        status: 'pending'
+      };
+      const state = promise.__deferredState;
+      promise.then(data => {
+        state.status = 'success';
+        state.data = data;
+      }).catch(error => {
+        state.status = 'error';
+        state.error = error;
+      });
+    }
+    return promise;
+  }
+  function isDehydratedDeferred(obj) {
+    return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
+  }
+
+  function useAwaited({
+    promise
+  }) {
+    const router = useRouter();
+    let state = promise.__deferredState;
+    const key = `__TSR__DEFERRED__${state.uid}`;
+    if (isDehydratedDeferred(promise)) {
+      state = router.hydrateData(key);
+      promise = Promise.resolve(state.data);
+      promise.__deferredState = state;
+    }
+    if (state.status === 'pending') {
+      throw promise;
+    }
+    if (state.status === 'error') {
+      throw state.error;
+    }
+    router.dehydrateData(key, state);
+    return [state.data];
+  }
+  function Await(props) {
+    const awaited = useAwaited(props);
+    return props.children(...awaited);
+  }
+
+  function CatchBoundary(props) {
+    const errorComponent = props.errorComponent ?? ErrorComponent;
+    return /*#__PURE__*/React__namespace.createElement(CatchBoundaryImpl, {
+      getResetKey: props.getResetKey,
+      onCatch: props.onCatch,
+      children: ({
+        error
+      }) => {
+        if (error) {
+          return /*#__PURE__*/React__namespace.createElement(errorComponent, {
+            error
+          });
+        }
+        return props.children;
+      }
+    });
+  }
+  class CatchBoundaryImpl extends React__namespace.Component {
+    state = {
+      error: null
+    };
+    static getDerivedStateFromProps(props) {
+      return {
+        resetKey: props.getResetKey()
+      };
+    }
+    static getDerivedStateFromError(error) {
+      return {
+        error
+      };
+    }
+    componentDidUpdate(prevProps, prevState) {
+      if (prevState.error && prevState.resetKey !== this.state.resetKey) {
+        this.setState({
+          error: null
+        });
+      }
+    }
+    componentDidCatch(error) {
+      console.error(error);
+      this.props.onCatch?.(error);
+    }
+    render() {
+      return this.props.children(this.state);
+    }
+  }
+  function ErrorComponent({
+    error
+  }) {
+    const [show, setShow] = React__namespace.useState("development" !== 'production');
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        padding: '.5rem',
+        maxWidth: '100%'
+      }
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '.5rem'
+      }
+    }, /*#__PURE__*/React__namespace.createElement("strong", {
+      style: {
+        fontSize: '1rem'
+      }
+    }, "Something went wrong!"), /*#__PURE__*/React__namespace.createElement("button", {
+      style: {
+        appearance: 'none',
+        fontSize: '.6em',
+        border: '1px solid currentColor',
+        padding: '.1rem .2rem',
+        fontWeight: 'bold',
+        borderRadius: '.25rem'
+      },
+      onClick: () => setShow(d => !d)
+    }, show ? 'Hide Error' : 'Show Error')), /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        height: '.25rem'
+      }
+    }), show ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("pre", {
+      style: {
+        fontSize: '.7em',
+        border: '1px solid red',
+        borderRadius: '.25rem',
+        padding: '.3rem',
+        color: 'red',
+        overflow: 'auto'
+      }
+    }, error.message ? /*#__PURE__*/React__namespace.createElement("code", null, error.message) : null)) : null);
+  }
+
   var withSelector = {exports: {}};
 
   var withSelector_development = {};
@@ -625,95 +779,11 @@
     return true;
   }
 
-  function CatchBoundary(props) {
-    const errorComponent = props.errorComponent ?? ErrorComponent;
-    return /*#__PURE__*/React__namespace.createElement(CatchBoundaryImpl, {
-      getResetKey: props.getResetKey,
-      onCatch: props.onCatch,
-      children: ({
-        error
-      }) => {
-        if (error) {
-          return /*#__PURE__*/React__namespace.createElement(errorComponent, {
-            error
-          });
-        }
-        return props.children;
-      }
+  function useRouterState(opts) {
+    const contextRouter = useRouter({
+      warn: opts?.router === undefined
     });
-  }
-  class CatchBoundaryImpl extends React__namespace.Component {
-    state = {
-      error: null
-    };
-    static getDerivedStateFromProps(props) {
-      return {
-        resetKey: props.getResetKey()
-      };
-    }
-    static getDerivedStateFromError(error) {
-      return {
-        error
-      };
-    }
-    componentDidUpdate(prevProps, prevState) {
-      if (prevState.error && prevState.resetKey !== this.state.resetKey) {
-        this.setState({
-          error: null
-        });
-      }
-    }
-    componentDidCatch(error) {
-      console.error(error);
-      this.props.onCatch?.(error);
-    }
-    render() {
-      return this.props.children(this.state);
-    }
-  }
-  function ErrorComponent({
-    error
-  }) {
-    const [show, setShow] = React__namespace.useState("development" !== 'production');
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        padding: '.5rem',
-        maxWidth: '100%'
-      }
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '.5rem'
-      }
-    }, /*#__PURE__*/React__namespace.createElement("strong", {
-      style: {
-        fontSize: '1rem'
-      }
-    }, "Something went wrong!"), /*#__PURE__*/React__namespace.createElement("button", {
-      style: {
-        appearance: 'none',
-        fontSize: '.6em',
-        border: '1px solid currentColor',
-        padding: '.1rem .2rem',
-        fontWeight: 'bold',
-        borderRadius: '.25rem'
-      },
-      onClick: () => setShow(d => !d)
-    }, show ? 'Hide Error' : 'Show Error')), /*#__PURE__*/React__namespace.createElement("div", {
-      style: {
-        height: '.25rem'
-      }
-    }), show ? /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("pre", {
-      style: {
-        fontSize: '.7em',
-        border: '1px solid red',
-        borderRadius: '.25rem',
-        padding: '.3rem',
-        color: 'red',
-        overflow: 'auto'
-      }
-    }, error.message ? /*#__PURE__*/React__namespace.createElement("code", null, error.message) : null)) : null);
+    return useStore((opts?.router || contextRouter).__store, opts?.select);
   }
 
   // from https://stackoverflow.com/a/76458160
@@ -908,12 +978,6 @@
     }
     return true;
   }
-  function useRouteContext(opts) {
-    return useMatch({
-      ...opts,
-      select: match => opts?.select ? opts.select(match.context) : match.context
-    });
-  }
   const useLayoutEffect$1 = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   function escapeJSON(jsonString) {
     return jsonString.replace(/\\/g, '\\\\') // Escape backslashes
@@ -1012,282 +1076,100 @@
         return matches[index + 1]?.id;
       }
     });
-    if (!childMatchId) {
-      return null;
-    }
-    return /*#__PURE__*/React__namespace.createElement(Match, {
-      matchId: childMatchId
-    });
-  });
-  function useMatchRoute() {
-    useRouterState({
-      select: s => [s.location, s.resolvedLocation]
-    });
-    const {
-      matchRoute
-    } = useRouter();
-    return React__namespace.useCallback(opts => {
-      const {
-        pending,
-        caseSensitive,
-        fuzzy,
-        includeSearch,
-        ...rest
-      } = opts;
-      return matchRoute(rest, {
-        pending,
-        caseSensitive,
-        fuzzy,
-        includeSearch
-      });
-    }, []);
-  }
-  function MatchRoute(props) {
-    const matchRoute = useMatchRoute();
-    const params = matchRoute(props);
-    if (typeof props.children === 'function') {
-      return props.children(params);
-    }
-    return !!params ? props.children : null;
-  }
-  function getRenderedMatches(state) {
-    return state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
-  }
-  function useMatch(opts) {
-    const router = useRouter();
-    const nearestMatchId = React__namespace.useContext(matchContext);
-    const nearestMatchRouteId = getRenderedMatches(router.state).find(d => d.id === nearestMatchId)?.routeId;
-    const matchRouteId = (() => {
-      const matches = getRenderedMatches(router.state);
-      const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatchId);
-      return match.routeId;
-    })();
-    if (opts?.strict ?? true) {
-      invariant(nearestMatchRouteId == matchRouteId, `useMatch("${matchRouteId}") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch("${matchRouteId}", { strict: false })' or 'useRoute("${matchRouteId}")' instead?`);
-    }
-    const matchSelection = useRouterState({
-      select: state => {
-        const match = getRenderedMatches(state).find(d => d.id === nearestMatchId);
-        invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
-        return opts?.select ? opts.select(match) : match;
-      }
-    });
-    return matchSelection;
-  }
-  function useMatches(opts) {
-    return useRouterState({
-      select: state => {
-        let matches = getRenderedMatches(state);
-        return opts?.select ? opts.select(matches) : matches;
-      }
-    });
-  }
-  function useParentMatches(opts) {
-    const contextMatchId = React__namespace.useContext(matchContext);
-    return useMatches({
-      select: matches => {
-        matches = matches.slice(matches.findIndex(d => d.id === contextMatchId));
-        return opts?.select ? opts.select(matches) : matches;
-      }
-    });
-  }
-  function useLoaderDeps(opts) {
-    return useMatch({
-      ...opts,
-      select: s => {
-        return typeof opts.select === 'function' ? opts.select(s?.loaderDeps) : s?.loaderDeps;
-      }
-    });
-  }
-  function useLoaderData(opts) {
-    return useMatch({
-      ...opts,
-      select: s => {
-        return typeof opts.select === 'function' ? opts.select(s?.loaderData) : s?.loaderData;
-      }
-    });
-  }
-
-  const useTransition = React__namespace.useTransition || (() => [false, cb => {
-    cb();
-  }]);
-  exports.routerContext = /*#__PURE__*/React__namespace.createContext(null);
-  if (typeof document !== 'undefined') {
-    if (window.__TSR_ROUTER_CONTEXT__) {
-      exports.routerContext = window.__TSR_ROUTER_CONTEXT__;
-    } else {
-      window.__TSR_ROUTER_CONTEXT__ = exports.routerContext;
-    }
-  }
-  function RouterProvider({
-    router,
-    ...rest
-  }) {
-    // Allow the router to update options on the router instance
-    router.update({
-      ...router.options,
-      ...rest,
-      context: {
-        ...router.options.context,
-        ...rest?.context
-      }
-    });
-    const matches = router.options.InnerWrap ? /*#__PURE__*/React__namespace.createElement(router.options.InnerWrap, null, /*#__PURE__*/React__namespace.createElement(Matches, null)) : /*#__PURE__*/React__namespace.createElement(Matches, null);
-    const provider = /*#__PURE__*/React__namespace.createElement(exports.routerContext.Provider, {
-      value: router
-    }, matches, /*#__PURE__*/React__namespace.createElement(Transitioner, null));
-    if (router.options.Wrap) {
-      return /*#__PURE__*/React__namespace.createElement(router.options.Wrap, null, provider);
-    }
-    return provider;
-  }
-  function Transitioner() {
-    const mountLoadCount = React__namespace.useRef(0);
-    const router = useRouter();
-    const routerState = useRouterState({
-      select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
-    });
-    const [isTransitioning, startReactTransition] = useTransition();
-    router.startReactTransition = startReactTransition;
-    React__namespace.useEffect(() => {
-      if (isTransitioning) {
-        router.__store.setState(s => ({
-          ...s,
-          isTransitioning
-        }));
-      }
-    }, [isTransitioning]);
-    const tryLoad = () => {
-      const apply = cb => {
-        if (!routerState.isTransitioning) {
-          startReactTransition(() => cb());
-        } else {
-          cb();
-        }
-      };
-      apply(() => {
-        try {
-          router.load();
-        } catch (err) {
-          console.error(err);
-        }
-      });
-    };
-    useLayoutEffect$1(() => {
-      const unsub = router.history.subscribe(() => {
-        router.latestLocation = router.parseLocation(router.latestLocation);
-        if (routerState.location !== router.latestLocation) {
-          tryLoad();
-        }
-      });
-      const nextLocation = router.buildLocation({
-        search: true,
-        params: true,
-        hash: true,
-        state: true
-      });
-      if (routerState.location.href !== nextLocation.href) {
-        router.commitLocation({
-          ...nextLocation,
-          replace: true
-        });
-      }
-      return () => {
-        unsub();
-      };
-    }, [router.history]);
-    useLayoutEffect$1(() => {
-      if (React__namespace.useTransition ? routerState.isTransitioning && !isTransitioning : !routerState.isLoading && routerState.resolvedLocation !== routerState.location) {
-        router.emit({
-          type: 'onResolved',
-          fromLocation: routerState.resolvedLocation,
-          toLocation: routerState.location,
-          pathChanged: routerState.location.href !== routerState.resolvedLocation?.href
-        });
-        if (document.querySelector) {
-          if (routerState.location.hash !== '') {
-            const el = document.getElementById(routerState.location.hash);
-            if (el) {
-              el.scrollIntoView();
-            }
-          }
-        }
-        router.__store.setState(s => ({
-          ...s,
-          isTransitioning: false,
-          resolvedLocation: s.location
-        }));
-      }
-    }, [routerState.isTransitioning, isTransitioning, routerState.isLoading, routerState.resolvedLocation, routerState.location]);
-    useLayoutEffect$1(() => {
-      if (!window.__TSR_DEHYDRATED__ && !mountLoadCount.current) {
-        mountLoadCount.current++;
-        tryLoad();
-      }
-    }, []);
-    return null;
-  }
-  function getRouteMatch(state, id) {
-    return [...state.cachedMatches, ...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
-  }
-  function useRouterState(opts) {
-    const contextRouter = useRouter({
-      warn: opts?.router === undefined
-    });
-    return useStore((opts?.router || contextRouter).__store, opts?.select);
-  }
-  function useRouter(opts) {
-    const resolvedContext = typeof document !== 'undefined' ? window.__TSR_ROUTER_CONTEXT__ || exports.routerContext : exports.routerContext;
-    const value = React__namespace.useContext(resolvedContext);
-    warning(!((opts?.warn ?? true) && !value), 'useRouter must be used inside a <RouterProvider> component!');
-    return value;
-  }
-
-  function defer(_promise) {
-    const promise = _promise;
-    if (!promise.__deferredState) {
-      promise.__deferredState = {
-        uid: Math.random().toString(36).slice(2),
-        status: 'pending'
-      };
-      const state = promise.__deferredState;
-      promise.then(data => {
-        state.status = 'success';
-        state.data = data;
-      }).catch(error => {
-        state.status = 'error';
-        state.error = error;
+    if (!childMatchId) {
+      return null;
+    }
+    return /*#__PURE__*/React__namespace.createElement(Match, {
+      matchId: childMatchId
+    });
+  });
+  function useMatchRoute() {
+    useRouterState({
+      select: s => [s.location, s.resolvedLocation]
+    });
+    const {
+      matchRoute
+    } = useRouter();
+    return React__namespace.useCallback(opts => {
+      const {
+        pending,
+        caseSensitive,
+        fuzzy,
+        includeSearch,
+        ...rest
+      } = opts;
+      return matchRoute(rest, {
+        pending,
+        caseSensitive,
+        fuzzy,
+        includeSearch
       });
+    }, []);
+  }
+  function MatchRoute(props) {
+    const matchRoute = useMatchRoute();
+    const params = matchRoute(props);
+    if (typeof props.children === 'function') {
+      return props.children(params);
     }
-    return promise;
+    return !!params ? props.children : null;
   }
-  function isDehydratedDeferred(obj) {
-    return typeof obj === 'object' && obj !== null && !(obj instanceof Promise) && !obj.then && '__deferredState' in obj;
+  function getRenderedMatches(state) {
+    return state.pendingMatches?.some(d => d.showPending) ? state.pendingMatches : state.matches;
   }
-
-  function useAwaited({
-    promise
-  }) {
+  function useMatch(opts) {
     const router = useRouter();
-    let state = promise.__deferredState;
-    const key = `__TSR__DEFERRED__${state.uid}`;
-    if (isDehydratedDeferred(promise)) {
-      state = router.hydrateData(key);
-      promise = Promise.resolve(state.data);
-      promise.__deferredState = state;
-    }
-    if (state.status === 'pending') {
-      throw promise;
-    }
-    if (state.status === 'error') {
-      throw state.error;
+    const nearestMatchId = React__namespace.useContext(matchContext);
+    const nearestMatchRouteId = getRenderedMatches(router.state).find(d => d.id === nearestMatchId)?.routeId;
+    const matchRouteId = (() => {
+      const matches = getRenderedMatches(router.state);
+      const match = opts?.from ? matches.find(d => d.routeId === opts?.from) : matches.find(d => d.id === nearestMatchId);
+      return match.routeId;
+    })();
+    if (opts?.strict ?? true) {
+      invariant(nearestMatchRouteId == matchRouteId, `useMatch("${matchRouteId}") is being called in a component that is meant to render the '${nearestMatchRouteId}' route. Did you mean to 'useMatch("${matchRouteId}", { strict: false })' or 'useRoute("${matchRouteId}")' instead?`);
     }
-    router.dehydrateData(key, state);
-    return [state.data];
+    const matchSelection = useRouterState({
+      select: state => {
+        const match = getRenderedMatches(state).find(d => d.id === nearestMatchId);
+        invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
+        return opts?.select ? opts.select(match) : match;
+      }
+    });
+    return matchSelection;
   }
-  function Await(props) {
-    const awaited = useAwaited(props);
-    return props.children(...awaited);
+  function useMatches(opts) {
+    return useRouterState({
+      select: state => {
+        let matches = getRenderedMatches(state);
+        return opts?.select ? opts.select(matches) : matches;
+      }
+    });
+  }
+  function useParentMatches(opts) {
+    const contextMatchId = React__namespace.useContext(matchContext);
+    return useMatches({
+      select: matches => {
+        matches = matches.slice(matches.findIndex(d => d.id === contextMatchId));
+        return opts?.select ? opts.select(matches) : matches;
+      }
+    });
+  }
+  function useLoaderDeps(opts) {
+    return useMatch({
+      ...opts,
+      select: s => {
+        return typeof opts.select === 'function' ? opts.select(s?.loaderDeps) : s?.loaderDeps;
+      }
+    });
+  }
+  function useLoaderData(opts) {
+    return useMatch({
+      ...opts,
+      select: s => {
+        return typeof opts.select === 'function' ? opts.select(s?.loaderData) : s?.loaderData;
+      }
+    });
   }
 
   function joinPaths(paths) {
@@ -2119,6 +2001,121 @@
     };
   }
 
+  const useTransition = React__namespace.useTransition || (() => [false, cb => {
+    cb();
+  }]);
+  function RouterProvider({
+    router,
+    ...rest
+  }) {
+    // Allow the router to update options on the router instance
+    router.update({
+      ...router.options,
+      ...rest,
+      context: {
+        ...router.options.context,
+        ...rest?.context
+      }
+    });
+    const matches = router.options.InnerWrap ? /*#__PURE__*/React__namespace.createElement(router.options.InnerWrap, null, /*#__PURE__*/React__namespace.createElement(Matches, null)) : /*#__PURE__*/React__namespace.createElement(Matches, null);
+    const provider = /*#__PURE__*/React__namespace.createElement(exports.routerContext.Provider, {
+      value: router
+    }, matches, /*#__PURE__*/React__namespace.createElement(Transitioner, null));
+    if (router.options.Wrap) {
+      return /*#__PURE__*/React__namespace.createElement(router.options.Wrap, null, provider);
+    }
+    return provider;
+  }
+  function Transitioner() {
+    const mountLoadCount = React__namespace.useRef(0);
+    const router = useRouter();
+    const routerState = useRouterState({
+      select: s => pick(s, ['isLoading', 'location', 'resolvedLocation', 'isTransitioning'])
+    });
+    const [isTransitioning, startReactTransition] = useTransition();
+    router.startReactTransition = startReactTransition;
+    React__namespace.useEffect(() => {
+      if (isTransitioning) {
+        router.__store.setState(s => ({
+          ...s,
+          isTransitioning
+        }));
+      }
+    }, [isTransitioning]);
+    const tryLoad = () => {
+      const apply = cb => {
+        if (!routerState.isTransitioning) {
+          startReactTransition(() => cb());
+        } else {
+          cb();
+        }
+      };
+      apply(() => {
+        try {
+          router.load();
+        } catch (err) {
+          console.error(err);
+        }
+      });
+    };
+    useLayoutEffect$1(() => {
+      const unsub = router.history.subscribe(() => {
+        router.latestLocation = router.parseLocation(router.latestLocation);
+        if (routerState.location !== router.latestLocation) {
+          tryLoad();
+        }
+      });
+      const nextLocation = router.buildLocation({
+        search: true,
+        params: true,
+        hash: true,
+        state: true
+      });
+      if (routerState.location.href !== nextLocation.href) {
+        router.commitLocation({
+          ...nextLocation,
+          replace: true
+        });
+      }
+      return () => {
+        unsub();
+      };
+    }, [router.history]);
+    useLayoutEffect$1(() => {
+      if (React__namespace.useTransition ? routerState.isTransitioning && !isTransitioning : !routerState.isLoading && routerState.resolvedLocation !== routerState.location) {
+        router.emit({
+          type: 'onResolved',
+          fromLocation: routerState.resolvedLocation,
+          toLocation: routerState.location,
+          pathChanged: routerState.location.href !== routerState.resolvedLocation?.href
+        });
+        if (document.querySelector) {
+          if (routerState.location.hash !== '') {
+            const el = document.getElementById(routerState.location.hash);
+            if (el) {
+              el.scrollIntoView();
+            }
+          }
+        }
+        router.__store.setState(s => ({
+          ...s,
+          isTransitioning: false,
+          resolvedLocation: s.location
+        }));
+      }
+    }, [routerState.isTransitioning, isTransitioning, routerState.isLoading, routerState.resolvedLocation, routerState.location]);
+    useLayoutEffect$1(() => {
+      if (!window.__TSR_DEHYDRATED__ && !mountLoadCount.current) {
+        mountLoadCount.current++;
+        tryLoad();
+      }
+    }, []);
+    return null;
+  }
+  function getRouteMatch(state, id) {
+    return [...state.cachedMatches, ...(state.pendingMatches ?? []), ...state.matches].find(d => d.id === id);
+  }
+
   // import warning from 'tiny-warning'
 
   //
@@ -3414,6 +3411,13 @@
     return null;
   }
 
+  function useRouteContext(opts) {
+    return useMatch({
+      ...opts,
+      select: match => opts?.select ? opts.select(match.context) : match.context
+    });
+  }
+
   exports.Await = Await;
   exports.Block = Block;
   exports.CatchBoundary = CatchBoundary;