@richie-router/react 0.1.3 → 0.1.4

package/dist/cjs/router.cjs

@@ -69,6 +69,7 @@ __export(exports_router, {
   useParams: () => useParams,
   useNavigate: () => useNavigate,
   useMatches: () => useMatches,
+  useMatchRoute: () => useMatchRoute,
   useMatch: () => useMatch,
   useLocation: () => useLocation,
   useElementScrollRestoration: () => useElementScrollRestoration,
@@ -97,7 +98,7 @@ module.exports = __toCommonJS(exports_router);
 var import_react = __toESM(require("react"));
 var import_core = require("@richie-router/core");
 var import_history = require("./history.cjs");
-var jsx_dev_runtime = require("react/jsx-dev-runtime");
+var jsx_runtime = require("react/jsx-runtime");
 var RouterContext = import_react.default.createContext(null);
 var RouterStateContext = import_react.default.createContext(null);
 var OutletContext = import_react.default.createContext(null);
@@ -158,6 +159,21 @@ function prependBasePathToHref(href, basePath) {
 function routeHasRecord(value) {
   return typeof value === "object" && value !== null;
 }
+function isDeepInclusiveMatch(expected, actual) {
+  if (Array.isArray(expected)) {
+    if (!Array.isArray(actual) || expected.length !== actual.length) {
+      return false;
+    }
+    return expected.every((value, index) => isDeepInclusiveMatch(value, actual[index]));
+  }
+  if (routeHasRecord(expected)) {
+    if (!routeHasRecord(actual)) {
+      return false;
+    }
+    return Object.entries(expected).every(([key, value]) => (key in actual) && isDeepInclusiveMatch(value, actual[key]));
+  }
+  return Object.is(expected, actual);
+}
 function routeHasInlineHead(route) {
   const headOption = route.options.head;
   return Boolean(headOption && typeof headOption !== "string");
@@ -802,17 +818,17 @@ function RenderMatches({ matches, index }) {
     return null;
   }
   const Component = match.route.options.component;
-  const outlet = /* @__PURE__ */ jsx_dev_runtime.jsxDEV(RenderMatches, {
+  const outlet = /* @__PURE__ */ jsx_runtime.jsx(RenderMatches, {
     matches,
     index: index + 1
-  }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(MatchContext.Provider, {
+  });
+  return /* @__PURE__ */ jsx_runtime.jsx(MatchContext.Provider, {
     value: match,
-    children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV(OutletContext.Provider, {
+    children: /* @__PURE__ */ jsx_runtime.jsx(OutletContext.Provider, {
       value: outlet,
-      children: Component ? /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Component, {}, undefined, false, undefined, this) : outlet
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+      children: Component ? /* @__PURE__ */ jsx_runtime.jsx(Component, {}) : outlet
+    })
+  });
 }
 function renderError(error, matches, router) {
   const reversed = [...matches].reverse();
@@ -821,9 +837,9 @@ function renderError(error, matches, router) {
     if (NotFoundComponent) {
       return import_react.default.createElement(NotFoundComponent);
     }
-    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_runtime.jsx("div", {
       children: "Not Found"
-    }, undefined, false, undefined, this);
+    });
   }
   const ErrorComponent = reversed.find((match) => match.route.options.errorComponent)?.route.options.errorComponent ?? router.options.defaultErrorComponent;
   if (ErrorComponent) {
@@ -834,9 +850,9 @@ function renderError(error, matches, router) {
       }
     });
   }
-  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("pre", {
+  return /* @__PURE__ */ jsx_runtime.jsx("pre", {
     children: error instanceof Error ? error.message : "Unknown routing error"
-  }, undefined, false, undefined, this);
+  });
 }
 function RouterProvider({ router }) {
   const snapshot = import_react.default.useSyncExternalStore(router.subscribe, router.getSnapshot, router.getSnapshot);
@@ -849,17 +865,17 @@ function RouterProvider({ router }) {
   import_react.default.useEffect(() => {
     reconcileDocumentHead(snapshot.head);
   }, [snapshot.head]);
-  const content = snapshot.error ? renderError(snapshot.error, snapshot.matches, router) : /* @__PURE__ */ jsx_dev_runtime.jsxDEV(RenderMatches, {
+  const content = snapshot.error ? renderError(snapshot.error, snapshot.matches, router) : /* @__PURE__ */ jsx_runtime.jsx(RenderMatches, {
     matches: snapshot.matches,
     index: 0
-  }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(RouterContext.Provider, {
+  });
+  return /* @__PURE__ */ jsx_runtime.jsx(RouterContext.Provider, {
     value: router,
-    children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV(RouterStateContext.Provider, {
+    children: /* @__PURE__ */ jsx_runtime.jsx(RouterStateContext.Provider, {
       value: snapshot,
       children: content
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+    })
+  });
 }
 function Outlet() {
   return import_react.default.useContext(OutletContext);
@@ -885,6 +901,31 @@ function useNavigate() {
     await router.navigate(options);
   }, [router]);
 }
+function useMatchRoute() {
+  const location = useLocation();
+  return import_react.default.useCallback((options) => {
+    const matched = import_core.matchPathname(options.to, location.pathname, {
+      partial: options.fuzzy === true
+    });
+    if (!matched) {
+      return false;
+    }
+    if (options.params) {
+      for (const [key, value] of Object.entries(options.params)) {
+        if (value !== undefined && matched.params[key] !== value) {
+          return false;
+        }
+      }
+    }
+    if (options.includeSearch) {
+      const expectedSearch = options.search ?? {};
+      if (!isDeepInclusiveMatch(expectedSearch, location.search)) {
+        return false;
+      }
+    }
+    return matched.params;
+  }, [location.pathname, location.search]);
+}
 function useLocation() {
   return useRouterStateContext().location;
 }
@@ -928,12 +969,14 @@ function useElementScrollRestoration() {
     ref: () => {}
   };
 }
-function useResolvedLink(props) {
+function useResolvedLink(props, activeOptions) {
   const router = useRouterContext();
   const href = router.buildHref(props);
   const location = useLocation();
-  const pathOnly = stripBasePathFromHref(href, router.options.basePath).split(/[?#]/u)[0] ?? href;
-  const isActive = pathOnly === location.pathname;
+  const targetPathname = stripBasePathFromHref(href, router.options.basePath).split(/[?#]/u)[0] ?? href;
+  const isActive = import_core.matchPathname(targetPathname, location.pathname, {
+    partial: activeOptions?.exact !== true
+  }) !== null;
   return { href, isActive, router };
 }
 var LinkComponent = import_react.default.forwardRef(function LinkInner(props, ref) {
@@ -949,6 +992,7 @@ var LinkComponent = import_react.default.forwardRef(function LinkInner(props, re
     state,
     mask,
     ignoreBlocker,
+    activeOptions,
     activeProps,
     children,
     onClick,
@@ -969,7 +1013,7 @@ var LinkComponent = import_react.default.forwardRef(function LinkInner(props, re
     mask,
     ignoreBlocker
   };
-  const { href, isActive, router } = useResolvedLink(navigation);
+  const { href, isActive, router } = useResolvedLink(navigation, activeOptions);
   const preloadMode = preload ?? router.options.defaultPreload;
   const preloadDelay = router.options.defaultPreloadDelay ?? 50;
   const preloadTimeout = import_react.default.useRef(null);
@@ -994,7 +1038,7 @@ var LinkComponent = import_react.default.forwardRef(function LinkInner(props, re
     }
   }, []);
   const renderedChildren = typeof children === "function" ? children({ isActive }) : children;
-  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("a", {
+  return /* @__PURE__ */ jsx_runtime.jsx("a", {
     ...anchorProps,
     ...isActive ? activeProps : undefined,
     ref,
@@ -1022,7 +1066,7 @@ var LinkComponent = import_react.default.forwardRef(function LinkInner(props, re
     },
     onBlur: cancelPreload,
     children: renderedChildren
-  }, undefined, false, undefined, this);
+  });
 });
 var Link = LinkComponent;
 function createLink(Component) {
@@ -1039,6 +1083,7 @@ function createLink(Component) {
       state,
       mask,
       ignoreBlocker,
+      activeOptions,
       activeProps,
       children,
       preload,
@@ -1056,7 +1101,7 @@ function createLink(Component) {
       mask,
       ignoreBlocker
     };
-    const { href, isActive, router } = useResolvedLink(navigation);
+    const { href, isActive, router } = useResolvedLink(navigation, activeOptions);
     const renderedChildren = typeof children === "function" ? children({ isActive }) : children;
     import_react.default.useEffect(() => {
       if (preload !== "render") {
@@ -1064,12 +1109,12 @@ function createLink(Component) {
       }
       router.preloadRoute(navigation);
     }, [navigation, preload, router]);
-    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV(Component, {
+    return /* @__PURE__ */ jsx_runtime.jsx(Component, {
       ...componentProps,
       ...isActive ? activeProps : undefined,
       href,
       children: renderedChildren
-    }, undefined, false, undefined, this);
+    });
   };
 }
 function linkOptions(options) {

package/dist/cjs/router.test.cjs

@@ -1,5 +1,38 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+
 // packages/react/src/router.test.ts
 var import_bun_test = require("bun:test");
+var import_react = __toESM(require("react"));
+var import_server = require("react-dom/server");
 var import_router = require("./router.cjs");
 function createTestRouteTree(options) {
   const rootRoute = import_router.createRootRoute({
@@ -75,7 +108,67 @@ function createNestedServerHeadTree() {
     posts: postsRoute
   });
 }
+function createLinkTestRouteTree(component) {
+  const rootRoute = import_router.createRootRoute({
+    component
+  });
+  const postRoute = import_router.createFileRoute("/post")({
+    component: () => null
+  });
+  const postsRoute = import_router.createFileRoute("/posts")({
+    component: () => null
+  });
+  const postDetailRoute = import_router.createFileRoute("/posts/$postId")({
+    component: () => null
+  });
+  postsRoute._addFileChildren({
+    detail: postDetailRoute
+  });
+  return rootRoute._addFileChildren({
+    post: postRoute,
+    posts: postsRoute
+  });
+}
+function renderLinkMarkup(initialEntry, component) {
+  const history = import_router.createMemoryHistory({
+    initialEntries: [initialEntry]
+  });
+  const router = import_router.createRouter({
+    routeTree: createLinkTestRouteTree(component),
+    history
+  });
+  return import_server.renderToStaticMarkup(import_react.default.createElement(import_router.RouterProvider, { router }));
+}
 import_bun_test.describe("createRouter basePath", () => {
+  import_bun_test.test('treats "/" as the root basePath', () => {
+    const history = import_router.createMemoryHistory({
+      initialEntries: ["/about?tab=team#bio"]
+    });
+    const router = import_router.createRouter({
+      routeTree: createTestRouteTree(),
+      history,
+      basePath: "/"
+    });
+    import_bun_test.expect(router.state.location.pathname).toBe("/about");
+    import_bun_test.expect(router.state.location.href).toBe("/about?tab=team#bio");
+    import_bun_test.expect(router.buildHref({ to: "/about" })).toBe("/about");
+  });
+  import_bun_test.test("normalizes a trailing slash in the basePath", async () => {
+    const history = import_router.createMemoryHistory({
+      initialEntries: ["/project/about?tab=team#bio"]
+    });
+    const router = import_router.createRouter({
+      routeTree: createTestRouteTree(),
+      history,
+      basePath: "/project/"
+    });
+    import_bun_test.expect(router.state.location.pathname).toBe("/about");
+    import_bun_test.expect(router.buildHref({ to: "/about" })).toBe("/project/about");
+    await router.navigate({
+      to: "/about"
+    });
+    import_bun_test.expect(history.location.href).toBe("/project/about");
+  });
   import_bun_test.test("strips the basePath from the current history location", () => {
     const history = import_router.createMemoryHistory({
       initialEntries: ["/project/about?tab=team#bio"]
@@ -411,3 +504,71 @@ import_bun_test.describe("createRouter basePath", () => {
     }
   });
 });
+import_bun_test.describe("Link active state", () => {
+  import_bun_test.test("keeps parent links active on child routes by default", () => {
+    const TestLink = import_router.Link;
+    const markup = renderLinkMarkup("/posts/alpha", () => import_react.default.createElement(TestLink, { to: "/posts", activeProps: { className: "active" } }, "Posts"));
+    import_bun_test.expect(markup).toContain('class="active"');
+  });
+  import_bun_test.test("supports exact-only active matching", () => {
+    const TestLink = import_router.Link;
+    const markup = renderLinkMarkup("/posts/alpha", () => import_react.default.createElement(TestLink, {
+      to: "/posts",
+      activeOptions: { exact: true },
+      activeProps: { className: "active" }
+    }, "Posts"));
+    import_bun_test.expect(markup).not.toContain('class="active"');
+  });
+  import_bun_test.test("matches path segments instead of raw string prefixes", () => {
+    const TestLink = import_router.Link;
+    const markup = renderLinkMarkup("/posts/alpha", () => import_react.default.createElement(TestLink, { to: "/post", activeProps: { className: "active" } }, "Post"));
+    import_bun_test.expect(markup).not.toContain('class="active"');
+  });
+  import_bun_test.test("applies activeOptions in custom links created with createLink", () => {
+    const AppLink = import_router.createLink((props) => import_react.default.createElement("a", props));
+    const markup = renderLinkMarkup("/posts/alpha", () => import_react.default.createElement(AppLink, {
+      to: "/posts",
+      activeOptions: { exact: true },
+      activeProps: { className: "active" }
+    }, "Posts"));
+    import_bun_test.expect(markup).not.toContain('class="active"');
+  });
+});
+import_bun_test.describe("useMatchRoute", () => {
+  import_bun_test.test("returns matched params for exact matches", () => {
+    const markup = renderLinkMarkup("/posts/alpha", () => {
+      const matchRoute = import_router.useMatchRoute();
+      const match = matchRoute({ to: "/posts/$postId" });
+      return import_react.default.createElement("pre", null, match === false ? "false" : JSON.stringify(match));
+    });
+    import_bun_test.expect(markup).toContain("{"postId":"alpha"}");
+  });
+  import_bun_test.test("supports fuzzy parent matching", () => {
+    const markup = renderLinkMarkup("/posts/alpha", () => {
+      const matchRoute = import_router.useMatchRoute();
+      const match = matchRoute({ to: "/posts", fuzzy: true });
+      return import_react.default.createElement("pre", null, match === false ? "false" : JSON.stringify(match));
+    });
+    import_bun_test.expect(markup).toContain("{}");
+  });
+  import_bun_test.test("supports partial param filters", () => {
+    const markup = renderLinkMarkup("/posts/alpha", () => {
+      const matchRoute = import_router.useMatchRoute();
+      const match = matchRoute({ to: "/posts/$postId", params: { postId: "beta" } });
+      return import_react.default.createElement("pre", null, match === false ? "false" : JSON.stringify(match));
+    });
+    import_bun_test.expect(markup).toContain("false");
+  });
+  import_bun_test.test("can include search params in the match", () => {
+    const markup = renderLinkMarkup("/posts/alpha?tab=details&count=2", () => {
+      const matchRoute = import_router.useMatchRoute();
+      const match = matchRoute({
+        to: "/posts/$postId",
+        includeSearch: true,
+        search: { tab: "details" }
+      });
+      return import_react.default.createElement("pre", null, match === false ? "false" : JSON.stringify(match));
+    });
+    import_bun_test.expect(markup).toContain("{"postId":"alpha"}");
+  });
+});

package/dist/esm/router.mjs

@@ -10,6 +10,7 @@ import {
   defaultStringifySearch,
   isNotFound,
   isRedirect,
+  matchPathname,
   matchRouteTree,
   notFound,
   redirect,
@@ -20,7 +21,7 @@ import {
   createHashHistory,
   createMemoryHistory
 } from "./history.mjs";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { jsx } from "react/jsx-runtime";
 var RouterContext = React.createContext(null);
 var RouterStateContext = React.createContext(null);
 var OutletContext = React.createContext(null);
@@ -81,6 +82,21 @@ function prependBasePathToHref(href, basePath) {
 function routeHasRecord(value) {
   return typeof value === "object" && value !== null;
 }
+function isDeepInclusiveMatch(expected, actual) {
+  if (Array.isArray(expected)) {
+    if (!Array.isArray(actual) || expected.length !== actual.length) {
+      return false;
+    }
+    return expected.every((value, index) => isDeepInclusiveMatch(value, actual[index]));
+  }
+  if (routeHasRecord(expected)) {
+    if (!routeHasRecord(actual)) {
+      return false;
+    }
+    return Object.entries(expected).every(([key, value]) => (key in actual) && isDeepInclusiveMatch(value, actual[key]));
+  }
+  return Object.is(expected, actual);
+}
 function routeHasInlineHead(route) {
   const headOption = route.options.head;
   return Boolean(headOption && typeof headOption !== "string");
@@ -725,17 +741,17 @@ function RenderMatches({ matches, index }) {
     return null;
   }
   const Component = match.route.options.component;
-  const outlet = /* @__PURE__ */ jsxDEV(RenderMatches, {
+  const outlet = /* @__PURE__ */ jsx(RenderMatches, {
     matches,
     index: index + 1
-  }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsxDEV(MatchContext.Provider, {
+  });
+  return /* @__PURE__ */ jsx(MatchContext.Provider, {
     value: match,
-    children: /* @__PURE__ */ jsxDEV(OutletContext.Provider, {
+    children: /* @__PURE__ */ jsx(OutletContext.Provider, {
       value: outlet,
-      children: Component ? /* @__PURE__ */ jsxDEV(Component, {}, undefined, false, undefined, this) : outlet
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+      children: Component ? /* @__PURE__ */ jsx(Component, {}) : outlet
+    })
+  });
 }
 function renderError(error, matches, router) {
   const reversed = [...matches].reverse();
@@ -744,9 +760,9 @@ function renderError(error, matches, router) {
     if (NotFoundComponent) {
       return React.createElement(NotFoundComponent);
     }
-    return /* @__PURE__ */ jsxDEV("div", {
+    return /* @__PURE__ */ jsx("div", {
       children: "Not Found"
-    }, undefined, false, undefined, this);
+    });
   }
   const ErrorComponent = reversed.find((match) => match.route.options.errorComponent)?.route.options.errorComponent ?? router.options.defaultErrorComponent;
   if (ErrorComponent) {
@@ -757,9 +773,9 @@ function renderError(error, matches, router) {
       }
     });
   }
-  return /* @__PURE__ */ jsxDEV("pre", {
+  return /* @__PURE__ */ jsx("pre", {
     children: error instanceof Error ? error.message : "Unknown routing error"
-  }, undefined, false, undefined, this);
+  });
 }
 function RouterProvider({ router }) {
   const snapshot = React.useSyncExternalStore(router.subscribe, router.getSnapshot, router.getSnapshot);
@@ -772,17 +788,17 @@ function RouterProvider({ router }) {
   React.useEffect(() => {
     reconcileDocumentHead(snapshot.head);
   }, [snapshot.head]);
-  const content = snapshot.error ? renderError(snapshot.error, snapshot.matches, router) : /* @__PURE__ */ jsxDEV(RenderMatches, {
+  const content = snapshot.error ? renderError(snapshot.error, snapshot.matches, router) : /* @__PURE__ */ jsx(RenderMatches, {
     matches: snapshot.matches,
     index: 0
-  }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsxDEV(RouterContext.Provider, {
+  });
+  return /* @__PURE__ */ jsx(RouterContext.Provider, {
     value: router,
-    children: /* @__PURE__ */ jsxDEV(RouterStateContext.Provider, {
+    children: /* @__PURE__ */ jsx(RouterStateContext.Provider, {
       value: snapshot,
       children: content
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
+    })
+  });
 }
 function Outlet() {
   return React.useContext(OutletContext);
@@ -808,6 +824,31 @@ function useNavigate() {
     await router.navigate(options);
   }, [router]);
 }
+function useMatchRoute() {
+  const location = useLocation();
+  return React.useCallback((options) => {
+    const matched = matchPathname(options.to, location.pathname, {
+      partial: options.fuzzy === true
+    });
+    if (!matched) {
+      return false;
+    }
+    if (options.params) {
+      for (const [key, value] of Object.entries(options.params)) {
+        if (value !== undefined && matched.params[key] !== value) {
+          return false;
+        }
+      }
+    }
+    if (options.includeSearch) {
+      const expectedSearch = options.search ?? {};
+      if (!isDeepInclusiveMatch(expectedSearch, location.search)) {
+        return false;
+      }
+    }
+    return matched.params;
+  }, [location.pathname, location.search]);
+}
 function useLocation() {
   return useRouterStateContext().location;
 }
@@ -851,12 +892,14 @@ function useElementScrollRestoration() {
     ref: () => {}
   };
 }
-function useResolvedLink(props) {
+function useResolvedLink(props, activeOptions) {
   const router = useRouterContext();
   const href = router.buildHref(props);
   const location = useLocation();
-  const pathOnly = stripBasePathFromHref(href, router.options.basePath).split(/[?#]/u)[0] ?? href;
-  const isActive = pathOnly === location.pathname;
+  const targetPathname = stripBasePathFromHref(href, router.options.basePath).split(/[?#]/u)[0] ?? href;
+  const isActive = matchPathname(targetPathname, location.pathname, {
+    partial: activeOptions?.exact !== true
+  }) !== null;
   return { href, isActive, router };
 }
 var LinkComponent = React.forwardRef(function LinkInner(props, ref) {
@@ -872,6 +915,7 @@ var LinkComponent = React.forwardRef(function LinkInner(props, ref) {
     state,
     mask,
     ignoreBlocker,
+    activeOptions,
     activeProps,
     children,
     onClick,
@@ -892,7 +936,7 @@ var LinkComponent = React.forwardRef(function LinkInner(props, ref) {
     mask,
     ignoreBlocker
   };
-  const { href, isActive, router } = useResolvedLink(navigation);
+  const { href, isActive, router } = useResolvedLink(navigation, activeOptions);
   const preloadMode = preload ?? router.options.defaultPreload;
   const preloadDelay = router.options.defaultPreloadDelay ?? 50;
   const preloadTimeout = React.useRef(null);
@@ -917,7 +961,7 @@ var LinkComponent = React.forwardRef(function LinkInner(props, ref) {
     }
   }, []);
   const renderedChildren = typeof children === "function" ? children({ isActive }) : children;
-  return /* @__PURE__ */ jsxDEV("a", {
+  return /* @__PURE__ */ jsx("a", {
     ...anchorProps,
     ...isActive ? activeProps : undefined,
     ref,
@@ -945,7 +989,7 @@ var LinkComponent = React.forwardRef(function LinkInner(props, ref) {
     },
     onBlur: cancelPreload,
     children: renderedChildren
-  }, undefined, false, undefined, this);
+  });
 });
 var Link = LinkComponent;
 function createLink(Component) {
@@ -962,6 +1006,7 @@ function createLink(Component) {
       state,
       mask,
       ignoreBlocker,
+      activeOptions,
       activeProps,
       children,
       preload,
@@ -979,7 +1024,7 @@ function createLink(Component) {
       mask,
       ignoreBlocker
     };
-    const { href, isActive, router } = useResolvedLink(navigation);
+    const { href, isActive, router } = useResolvedLink(navigation, activeOptions);
     const renderedChildren = typeof children === "function" ? children({ isActive }) : children;
     React.useEffect(() => {
       if (preload !== "render") {
@@ -987,12 +1032,12 @@ function createLink(Component) {
       }
       router.preloadRoute(navigation);
     }, [navigation, preload, router]);
-    return /* @__PURE__ */ jsxDEV(Component, {
+    return /* @__PURE__ */ jsx(Component, {
       ...componentProps,
       ...isActive ? activeProps : undefined,
       href,
       children: renderedChildren
-    }, undefined, false, undefined, this);
+    });
   };
 }
 function linkOptions(options) {
@@ -1015,6 +1060,7 @@ export {
   useParams,
   useNavigate,
   useMatches,
+  useMatchRoute,
   useMatch,
   useLocation,
   useElementScrollRestoration,

package/dist/esm/router.test.mjs

@@ -1,6 +1,12 @@
 // packages/react/src/router.test.ts
 import { describe, expect, test } from "bun:test";
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
 import {
+  Link,
+  useMatchRoute,
+  RouterProvider,
+  createLink,
   createFileRoute,
   createMemoryHistory,
   createRootRoute,
@@ -80,7 +86,67 @@ function createNestedServerHeadTree() {
     posts: postsRoute
   });
 }
+function createLinkTestRouteTree(component) {
+  const rootRoute = createRootRoute({
+    component
+  });
+  const postRoute = createFileRoute("/post")({
+    component: () => null
+  });
+  const postsRoute = createFileRoute("/posts")({
+    component: () => null
+  });
+  const postDetailRoute = createFileRoute("/posts/$postId")({
+    component: () => null
+  });
+  postsRoute._addFileChildren({
+    detail: postDetailRoute
+  });
+  return rootRoute._addFileChildren({
+    post: postRoute,
+    posts: postsRoute
+  });
+}
+function renderLinkMarkup(initialEntry, component) {
+  const history = createMemoryHistory({
+    initialEntries: [initialEntry]
+  });
+  const router = createRouter({
+    routeTree: createLinkTestRouteTree(component),
+    history
+  });
+  return renderToStaticMarkup(React.createElement(RouterProvider, { router }));
+}
 describe("createRouter basePath", () => {
+  test('treats "/" as the root basePath', () => {
+    const history = createMemoryHistory({
+      initialEntries: ["/about?tab=team#bio"]
+    });
+    const router = createRouter({
+      routeTree: createTestRouteTree(),
+      history,
+      basePath: "/"
+    });
+    expect(router.state.location.pathname).toBe("/about");
+    expect(router.state.location.href).toBe("/about?tab=team#bio");
+    expect(router.buildHref({ to: "/about" })).toBe("/about");
+  });
+  test("normalizes a trailing slash in the basePath", async () => {
+    const history = createMemoryHistory({
+      initialEntries: ["/project/about?tab=team#bio"]
+    });
+    const router = createRouter({
+      routeTree: createTestRouteTree(),
+      history,
+      basePath: "/project/"
+    });
+    expect(router.state.location.pathname).toBe("/about");
+    expect(router.buildHref({ to: "/about" })).toBe("/project/about");
+    await router.navigate({
+      to: "/about"
+    });
+    expect(history.location.href).toBe("/project/about");
+  });
   test("strips the basePath from the current history location", () => {
     const history = createMemoryHistory({
       initialEntries: ["/project/about?tab=team#bio"]
@@ -416,3 +482,71 @@ describe("createRouter basePath", () => {
     }
   });
 });
+describe("Link active state", () => {
+  test("keeps parent links active on child routes by default", () => {
+    const TestLink = Link;
+    const markup = renderLinkMarkup("/posts/alpha", () => React.createElement(TestLink, { to: "/posts", activeProps: { className: "active" } }, "Posts"));
+    expect(markup).toContain('class="active"');
+  });
+  test("supports exact-only active matching", () => {
+    const TestLink = Link;
+    const markup = renderLinkMarkup("/posts/alpha", () => React.createElement(TestLink, {
+      to: "/posts",
+      activeOptions: { exact: true },
+      activeProps: { className: "active" }
+    }, "Posts"));
+    expect(markup).not.toContain('class="active"');
+  });
+  test("matches path segments instead of raw string prefixes", () => {
+    const TestLink = Link;
+    const markup = renderLinkMarkup("/posts/alpha", () => React.createElement(TestLink, { to: "/post", activeProps: { className: "active" } }, "Post"));
+    expect(markup).not.toContain('class="active"');
+  });
+  test("applies activeOptions in custom links created with createLink", () => {
+    const AppLink = createLink((props) => React.createElement("a", props));
+    const markup = renderLinkMarkup("/posts/alpha", () => React.createElement(AppLink, {
+      to: "/posts",
+      activeOptions: { exact: true },
+      activeProps: { className: "active" }
+    }, "Posts"));
+    expect(markup).not.toContain('class="active"');
+  });
+});
+describe("useMatchRoute", () => {
+  test("returns matched params for exact matches", () => {
+    const markup = renderLinkMarkup("/posts/alpha", () => {
+      const matchRoute = useMatchRoute();
+      const match = matchRoute({ to: "/posts/$postId" });
+      return React.createElement("pre", null, match === false ? "false" : JSON.stringify(match));
+    });
+    expect(markup).toContain("{"postId":"alpha"}");
+  });
+  test("supports fuzzy parent matching", () => {
+    const markup = renderLinkMarkup("/posts/alpha", () => {
+      const matchRoute = useMatchRoute();
+      const match = matchRoute({ to: "/posts", fuzzy: true });
+      return React.createElement("pre", null, match === false ? "false" : JSON.stringify(match));
+    });
+    expect(markup).toContain("{}");
+  });
+  test("supports partial param filters", () => {
+    const markup = renderLinkMarkup("/posts/alpha", () => {
+      const matchRoute = useMatchRoute();
+      const match = matchRoute({ to: "/posts/$postId", params: { postId: "beta" } });
+      return React.createElement("pre", null, match === false ? "false" : JSON.stringify(match));
+    });
+    expect(markup).toContain("false");
+  });
+  test("can include search params in the match", () => {
+    const markup = renderLinkMarkup("/posts/alpha?tab=details&count=2", () => {
+      const matchRoute = useMatchRoute();
+      const match = matchRoute({
+        to: "/posts/$postId",
+        includeSearch: true,
+        search: { tab: "details" }
+      });
+      return React.createElement("pre", null, match === false ? "false" : JSON.stringify(match));
+    });
+    expect(markup).toContain("{"postId":"alpha"}");
+  });
+});

package/dist/types/router.d.ts

@@ -67,6 +67,8 @@ type ParamsInput<TParams> = TParams | ((previous: TParams) => TParams);
 type SearchInput<TSearch> = TSearch | ((previous: TSearch) => TSearch) | true;
 type ParamsOption<TParams> = keyof TParams extends never ? {
     params?: never;
+} : string extends keyof TParams ? {
+    params?: ParamsInput<TParams>;
 } : {
     params: ParamsInput<TParams>;
 };
@@ -107,8 +109,22 @@ export type NavigateOptions<TTo extends RoutePaths = RoutePaths> = {
     search?: SearchInput<SearchForTo<TTo>>;
 } & NavigateBaseOptions & ParamsOption<ParamsForTo<TTo>>;
 export type NavigateFn = <TTo extends RoutePaths>(options: NavigateOptions<TTo>) => Promise<void>;
+export interface MatchRouteOptions {
+    fuzzy?: boolean;
+    includeSearch?: boolean;
+}
+export type UseMatchRouteOptions<TTo extends RoutePaths = RoutePaths> = {
+    to: TTo;
+    params?: Partial<ParamsForTo<TTo>>;
+    search?: Record<string, unknown>;
+} & MatchRouteOptions;
+export type MatchRouteFn = <TTo extends RoutePaths>(options: UseMatchRouteOptions<TTo>) => false | ParamsForTo<TTo>;
+export interface ActiveOptions {
+    exact?: boolean;
+}
 export type LinkOwnProps<TTo extends RoutePaths> = NavigateOptions<TTo> & {
     preload?: 'intent' | 'render' | false;
+    activeOptions?: ActiveOptions;
     activeProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
     children?: React.ReactNode | ((ctx: {
         isActive: boolean;
@@ -217,8 +233,8 @@ export declare class Router<TRouteTree extends AnyRoute> {
     private handleHistoryChange;
 }
 export declare function createRouter<TRouteTree extends AnyRoute>(options: RouterOptions<TRouteTree>): Router<TRouteTree>;
-export declare function RouterProvider({ router }: {
-    router: RegisteredRouter;
+export declare function RouterProvider<TRouteTree extends AnyRoute>({ router }: {
+    router: Router<TRouteTree>;
 }): React.ReactElement;
 export declare function Outlet(): React.ReactNode;
 export declare function useRouter(): RegisteredRouter;
@@ -233,6 +249,7 @@ export declare function useSearch<TFrom extends RoutePaths>(options?: {
     from?: TFrom;
 }): SearchOfRoute<RouteById<TFrom>>;
 export declare function useNavigate(): NavigateFn;
+export declare function useMatchRoute(): MatchRouteFn;
 export declare function useLocation(): ParsedLocation;
 export declare function useRouterState<TSelection>(options: {
     select: Selector<TSelection>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@richie-router/react",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "React runtime, components, and hooks for Richie Router",
   "sideEffects": false,
   "exports": {