@richie-router/react 0.1.2 → 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,16 +98,89 @@ 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);
 var MatchContext = import_react.default.createContext(null);
 var MANAGED_HEAD_ATTRIBUTE = "data-richie-router-head";
-var EMPTY_HEAD = { meta: [], links: [], scripts: [], styles: [] };
+var EMPTY_HEAD = [];
+function ensureLeadingSlash(value) {
+  return value.startsWith("/") ? value : `/${value}`;
+}
+function normalizeBasePath(basePath) {
+  if (!basePath) {
+    return "";
+  }
+  const trimmed = basePath.trim();
+  if (trimmed === "" || trimmed === "/") {
+    return "";
+  }
+  const normalized = ensureLeadingSlash(trimmed).replace(/\/+$/u, "");
+  return normalized === "/" ? "" : normalized;
+}
+function parseHref(href) {
+  if (href.startsWith("http://") || href.startsWith("https://")) {
+    return new URL(href);
+  }
+  return new URL(ensureLeadingSlash(href), "http://richie-router.local");
+}
+function stripBasePathFromPathname(pathname, basePath) {
+  if (!basePath) {
+    return pathname;
+  }
+  if (pathname === basePath) {
+    return "/";
+  }
+  return pathname.startsWith(`${basePath}/`) ? pathname.slice(basePath.length) || "/" : pathname;
+}
+function stripBasePathFromHref(href, basePath) {
+  const normalizedBasePath = normalizeBasePath(basePath);
+  if (!normalizedBasePath) {
+    return href;
+  }
+  const url = parseHref(href);
+  return `${stripBasePathFromPathname(url.pathname, normalizedBasePath)}${url.search}${url.hash}`;
+}
+function prependBasePathToPathname(pathname, basePath) {
+  if (!basePath) {
+    return pathname;
+  }
+  return pathname === "/" ? basePath : `${basePath}${ensureLeadingSlash(pathname)}`;
+}
+function prependBasePathToHref(href, basePath) {
+  const normalizedBasePath = normalizeBasePath(basePath);
+  if (!normalizedBasePath) {
+    return href;
+  }
+  const url = parseHref(href);
+  return `${prependBasePathToPathname(url.pathname, normalizedBasePath)}${url.search}${url.hash}`;
+}
 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");
+}
+function matchesHaveInlineHead(matches) {
+  return matches.some((match) => routeHasInlineHead(match.route));
+}
 function resolveParamsInput(input, previous) {
   if (input === undefined) {
     return previous;
@@ -152,6 +226,8 @@ class Router {
   headCache = new Map;
   parseSearch;
   stringifySearch;
+  basePath;
+  initialHeadSnapshot;
   started = false;
   unsubscribeHistory;
   constructor(options) {
@@ -160,6 +236,7 @@ class Router {
     this.history = options.history ?? (typeof window === "undefined" ? import_history.createMemoryHistory() : import_history.createBrowserHistory());
     this.parseSearch = options.parseSearch ?? import_core.defaultParseSearch;
     this.stringifySearch = options.stringifySearch ?? import_core.defaultStringifySearch;
+    this.basePath = normalizeBasePath(options.basePath);
     for (const route of import_core.collectRoutes(this.routeTree)) {
       this.routesByFullPath.set(route.fullPath, route);
     }
@@ -167,15 +244,22 @@ class Router {
       this.routesByTo.set(branch.leaf.to, branch.leaf);
     }
     const location = this.readLocation();
+    const initialMatches = this.buildMatches(location);
+    const rawHistoryHref = this.history.location.href;
     const initialHeadSnapshot = typeof window !== "undefined" ? window.__RICHIE_ROUTER_HEAD__ : undefined;
-    const initialHead = initialHeadSnapshot && initialHeadSnapshot.href === location.href ? initialHeadSnapshot.head : EMPTY_HEAD;
+    const hasMatchingInitialHeadSnapshot = Boolean(initialHeadSnapshot && (initialHeadSnapshot.href === location.href || initialHeadSnapshot.href === rawHistoryHref));
+    const initialHead = hasMatchingInitialHeadSnapshot && initialHeadSnapshot ? initialHeadSnapshot.head : EMPTY_HEAD;
+    if (hasMatchingInitialHeadSnapshot && this.options.loadRouteHead === undefined && initialHeadSnapshot?.routeHeads !== undefined) {
+      this.seedHeadCacheFromRouteHeads(initialMatches, initialHeadSnapshot.routeHeads);
+    }
     if (typeof window !== "undefined" && initialHeadSnapshot !== undefined) {
       delete window.__RICHIE_ROUTER_HEAD__;
     }
+    this.initialHeadSnapshot = hasMatchingInitialHeadSnapshot ? initialHeadSnapshot : undefined;
     this.state = {
       status: "loading",
       location,
-      matches: this.buildMatches(location),
+      matches: initialMatches,
       head: initialHead,
       error: null
     };
@@ -206,15 +290,17 @@ class Router {
   }
   async load(options) {
     const nextLocation = this.readLocation();
+    const initialHeadSnapshot = this.initialHeadSnapshot?.href === nextLocation.href ? this.initialHeadSnapshot : undefined;
+    this.initialHeadSnapshot = undefined;
     await this.commitLocation(nextLocation, {
       request: options?.request,
       replace: true,
-      writeHistory: false
+      writeHistory: false,
+      initialHeadSnapshot
     });
   }
   async navigate(options) {
-    const href = this.buildHref(options);
-    const location = import_core.createParsedLocation(href, options.state ?? null, this.parseSearch);
+    const location = this.buildLocation(options);
     await this.commitLocation(location, {
       replace: options.replace ?? false,
       writeHistory: true,
@@ -222,8 +308,7 @@ class Router {
     });
   }
   async preloadRoute(options) {
-    const href = this.buildHref(options);
-    const location = import_core.createParsedLocation(href, options.state ?? null, this.parseSearch);
+    const location = this.buildLocation(options);
     try {
       await this.resolveLocation(location);
     } catch {}
@@ -233,6 +318,12 @@ class Router {
     await this.load();
   }
   buildHref(options) {
+    return prependBasePathToHref(this.buildLocationHref(options), this.basePath);
+  }
+  buildLocation(options) {
+    return import_core.createParsedLocation(this.buildLocationHref(options), options.state ?? null, this.parseSearch);
+  }
+  buildLocationHref(options) {
     const targetRoute = this.routesByTo.get(options.to) ?? null;
     const fromMatch = options.from ? this.findMatchByTo(options.from) : null;
     const previousParams = fromMatch?.params ?? {};
@@ -247,7 +338,7 @@ class Router {
   }
   readLocation() {
     const location = this.history.location;
-    return import_core.createParsedLocation(location.href, location.state, this.parseSearch);
+    return import_core.createParsedLocation(stripBasePathFromHref(location.href, this.basePath), location.state, this.parseSearch);
   }
   applyTrailingSlash(pathname, route) {
     const trailingSlash = this.options.trailingSlash ?? "preserve";
@@ -342,29 +433,102 @@ class Router {
         to: route.to
       });
     }
-    const head = await this.resolveLocationHead(matches, location, options?.request);
+    const head = await this.resolveLocationHead(matches, location, options?.request, options?.initialHeadSnapshot);
     return { matches, head, error: null };
   }
-  async resolveLocationHead(matches, location, request) {
+  async resolveLocationHead(matches, location, request, initialHeadSnapshot) {
     const resolvedHeadByRoute = new Map;
-    for (const match of matches) {
-      if (!match.route.serverHead) {
+    const serverMatches = matches.filter((match) => match.route.serverHead);
+    if (serverMatches.length === 0) {
+      return import_core.resolveHeadConfig(matches, resolvedHeadByRoute);
+    }
+    if (this.options.loadRouteHead !== undefined) {
+      for (const match of serverMatches) {
+        resolvedHeadByRoute.set(match.route.fullPath, await this.loadRouteHead(match.route, match.params, match.search, location, request));
+      }
+      return import_core.resolveHeadConfig(matches, resolvedHeadByRoute);
+    }
+    if (initialHeadSnapshot?.href === location.href && initialHeadSnapshot.routeHeads === undefined && !matchesHaveInlineHead(matches)) {
+      return initialHeadSnapshot.head;
+    }
+    let needsDocumentHeadFetch = false;
+    for (const match of serverMatches) {
+      const cachedHead = this.getCachedRouteHead(match.route.fullPath, match.params, match.search);
+      if (cachedHead) {
+        resolvedHeadByRoute.set(match.route.fullPath, cachedHead);
         continue;
       }
-      resolvedHeadByRoute.set(match.route.fullPath, await this.loadRouteHead(match.route, match.params, match.search, location, request));
+      needsDocumentHeadFetch = true;
+    }
+    if (!needsDocumentHeadFetch) {
+      return import_core.resolveHeadConfig(matches, resolvedHeadByRoute);
+    }
+    const documentHead = await this.fetchDocumentHead(location);
+    if ((documentHead.routeHeads?.length ?? 0) === 0 && !matchesHaveInlineHead(matches)) {
+      return documentHead.head;
+    }
+    const routeHeadsById = this.cacheRouteHeadsFromDocument(matches, documentHead.routeHeads ?? []);
+    for (const match of serverMatches) {
+      const responseHead = routeHeadsById.get(match.route.fullPath);
+      if (responseHead) {
+        resolvedHeadByRoute.set(match.route.fullPath, responseHead);
+        continue;
+      }
+      const cachedHead = this.getCachedRouteHead(match.route.fullPath, match.params, match.search);
+      if (cachedHead) {
+        resolvedHeadByRoute.set(match.route.fullPath, cachedHead);
+        continue;
+      }
+      const response = await this.fetchRouteHead(match.route, match.params, match.search);
+      this.setRouteHeadCache(match.route.fullPath, match.params, match.search, response);
+      resolvedHeadByRoute.set(match.route.fullPath, response.head);
     }
     return import_core.resolveHeadConfig(matches, resolvedHeadByRoute);
   }
-  async loadRouteHead(route, params, search, location, request) {
-    const cacheKey = JSON.stringify({
-      routeId: route.fullPath,
+  getRouteHeadCacheKey(routeId, params, search) {
+    return JSON.stringify({
+      routeId,
       params,
       search
     });
-    const cached = this.headCache.get(cacheKey);
+  }
+  getCachedRouteHead(routeId, params, search) {
+    const cached = this.headCache.get(this.getRouteHeadCacheKey(routeId, params, search));
     if (cached && cached.expiresAt > Date.now()) {
       return cached.head;
     }
+    return null;
+  }
+  setRouteHeadCache(routeId, params, search, response) {
+    this.headCache.set(this.getRouteHeadCacheKey(routeId, params, search), {
+      head: response.head,
+      expiresAt: Date.now() + (response.staleTime ?? 0)
+    });
+  }
+  seedHeadCacheFromRouteHeads(matches, routeHeads) {
+    this.cacheRouteHeadsFromDocument(matches, routeHeads);
+  }
+  cacheRouteHeadsFromDocument(matches, routeHeads) {
+    const routeHeadsById = new Map(routeHeads.map((entry) => [entry.routeId, entry]));
+    const resolvedHeadByRoute = new Map;
+    for (const match of matches) {
+      if (!match.route.serverHead) {
+        continue;
+      }
+      const entry = routeHeadsById.get(match.route.fullPath);
+      if (!entry) {
+        continue;
+      }
+      this.setRouteHeadCache(match.route.fullPath, match.params, match.search, entry);
+      resolvedHeadByRoute.set(match.route.fullPath, entry.head);
+    }
+    return resolvedHeadByRoute;
+  }
+  async loadRouteHead(route, params, search, location, request) {
+    const cachedHead = this.getCachedRouteHead(route.fullPath, params, search);
+    if (cachedHead) {
+      return cachedHead;
+    }
     const response = this.options.loadRouteHead !== undefined ? await this.options.loadRouteHead({
       route,
       routeId: route.fullPath,
@@ -373,14 +537,11 @@ class Router {
       location,
       request
     }) : await this.fetchRouteHead(route, params, search);
-    this.headCache.set(cacheKey, {
-      head: response.head,
-      expiresAt: Date.now() + (response.staleTime ?? 0)
-    });
+    this.setRouteHeadCache(route.fullPath, params, search, response);
     return response.head;
   }
   async fetchRouteHead(route, params, search) {
-    const basePath = this.options.headBasePath ?? "/head-api";
+    const basePath = this.options.headBasePath ?? prependBasePathToHref("/head-api", this.basePath);
     const searchParams = new URLSearchParams({
       routeId: route.fullPath,
       params: JSON.stringify(params),
@@ -395,6 +556,20 @@ class Router {
     }
     return await response.json();
   }
+  async fetchDocumentHead(location) {
+    const basePath = this.options.headBasePath ?? prependBasePathToHref("/head-api", this.basePath);
+    const searchParams = new URLSearchParams({
+      href: prependBasePathToHref(location.href, this.basePath)
+    });
+    const response = await fetch(`${basePath}?${searchParams.toString()}`);
+    if (!response.ok) {
+      if (response.status === 404) {
+        throw import_core.notFound();
+      }
+      throw new Error(`Failed to resolve server head for location "${location.href}"`);
+    }
+    return await response.json();
+  }
   async commitLocation(location, options) {
     this.state = {
       ...this.state,
@@ -404,13 +579,15 @@ class Router {
     this.notify();
     try {
       const resolved = await this.resolveLocation(location, {
-        request: options.request
+        request: options.request,
+        initialHeadSnapshot: options.initialHeadSnapshot
       });
+      const historyHref = prependBasePathToHref(location.href, this.basePath);
       if (options.writeHistory) {
         if (options.replace) {
-          this.history.replace(location.href, location.state);
+          this.history.replace(historyHref, location.state);
         } else {
-          this.history.push(location.href, location.state);
+          this.history.push(historyHref, location.state);
         }
       }
       this.state = {
@@ -431,11 +608,12 @@ class Router {
         return;
       }
       const errorMatches = this.buildMatches(location);
+      const historyHref = prependBasePathToHref(location.href, this.basePath);
       if (options.writeHistory) {
         if (options.replace) {
-          this.history.replace(location.href, location.state);
+          this.history.replace(historyHref, location.state);
         } else {
-          this.history.push(location.href, location.state);
+          this.history.push(historyHref, location.state);
         }
       }
       this.state = {
@@ -525,61 +703,95 @@ function createManagedHeadElements(head) {
     element.setAttribute(MANAGED_HEAD_ATTRIBUTE, "true");
     return element;
   };
-  for (const meta of head.meta ?? []) {
-    if ("title" in meta) {
-      const title = managed(document.createElement("title"));
-      title.textContent = meta.title;
-      elements.push(title);
+  const setAttributes = (element, attributes) => {
+    for (const [key, value] of Object.entries(attributes)) {
+      if (value === undefined || value === false) {
+        continue;
+      }
+      if (value === true) {
+        element.setAttribute(key, "");
+        continue;
+      }
+      element.setAttribute(key, value);
+    }
+  };
+  for (const element of head) {
+    if (element.tag === "title") {
       continue;
     }
-    const tag = managed(document.createElement("meta"));
-    if ("charset" in meta) {
-      tag.setAttribute("charset", meta.charset);
-    } else if ("name" in meta) {
-      tag.setAttribute("name", meta.name);
-      tag.setAttribute("content", meta.content);
-    } else if ("property" in meta) {
-      tag.setAttribute("property", meta.property);
-      tag.setAttribute("content", meta.content);
-    } else {
-      tag.setAttribute("http-equiv", meta.httpEquiv);
-      tag.setAttribute("content", meta.content);
+    if (element.tag === "meta") {
+      const tag2 = managed(document.createElement("meta"));
+      if ("charset" in element) {
+        tag2.setAttribute("charset", element.charset);
+      } else if ("name" in element) {
+        tag2.setAttribute("name", element.name);
+        tag2.setAttribute("content", element.content);
+      } else if ("property" in element) {
+        tag2.setAttribute("property", element.property);
+        tag2.setAttribute("content", element.content);
+      } else {
+        tag2.setAttribute("http-equiv", element.httpEquiv);
+        tag2.setAttribute("content", element.content);
+      }
+      elements.push(tag2);
+      continue;
+    }
+    if (element.tag === "link") {
+      const tag2 = managed(document.createElement("link"));
+      setAttributes(tag2, {
+        rel: element.rel,
+        href: element.href,
+        type: element.type,
+        media: element.media,
+        sizes: element.sizes,
+        crossorigin: element.crossorigin
+      });
+      elements.push(tag2);
+      continue;
+    }
+    if (element.tag === "style") {
+      const tag2 = managed(document.createElement("style"));
+      if (element.media) {
+        tag2.setAttribute("media", element.media);
+      }
+      tag2.textContent = element.children;
+      elements.push(tag2);
+      continue;
+    }
+    if (element.tag === "script") {
+      const tag2 = managed(document.createElement("script"));
+      if (element.src) {
+        tag2.setAttribute("src", element.src);
+      }
+      if (element.type) {
+        tag2.setAttribute("type", element.type);
+      }
+      if (element.async) {
+        tag2.async = true;
+      }
+      if (element.defer) {
+        tag2.defer = true;
+      }
+      if (element.children) {
+        tag2.textContent = element.children;
+      }
+      elements.push(tag2);
+      continue;
+    }
+    if (element.tag === "base") {
+      const tag2 = managed(document.createElement("base"));
+      tag2.setAttribute("href", element.href);
+      if (element.target) {
+        tag2.setAttribute("target", element.target);
+      }
+      elements.push(tag2);
+      continue;
+    }
+    const tag = managed(document.createElement(element.name));
+    setAttributes(tag, element.attrs ?? {});
+    if (element.children) {
+      tag.textContent = element.children;
     }
-    elements.push(tag);
-  }
-  for (const link of head.links ?? []) {
-    const tag = managed(document.createElement("link"));
-    tag.setAttribute("rel", link.rel);
-    tag.setAttribute("href", link.href);
-    if (link.type)
-      tag.setAttribute("type", link.type);
-    if (link.media)
-      tag.setAttribute("media", link.media);
-    if (link.sizes)
-      tag.setAttribute("sizes", link.sizes);
-    if (link.crossorigin)
-      tag.setAttribute("crossorigin", link.crossorigin);
-    elements.push(tag);
-  }
-  for (const style of head.styles ?? []) {
-    const tag = managed(document.createElement("style"));
-    if (style.media)
-      tag.setAttribute("media", style.media);
-    tag.textContent = style.children;
-    elements.push(tag);
-  }
-  for (const script of head.scripts ?? []) {
-    const tag = managed(document.createElement("script"));
-    if (script.src)
-      tag.setAttribute("src", script.src);
-    if (script.type)
-      tag.setAttribute("type", script.type);
-    if (script.async)
-      tag.async = true;
-    if (script.defer)
-      tag.defer = true;
-    if (script.children)
-      tag.textContent = script.children;
     elements.push(tag);
   }
   return elements;
@@ -588,6 +800,10 @@ function reconcileDocumentHead(head) {
   if (typeof document === "undefined") {
     return;
   }
+  const title = [...head].reverse().find((element) => element.tag === "title");
+  if (title && title.tag === "title") {
+    document.title = title.children;
+  }
   for (const element of Array.from(document.head.querySelectorAll(`[${MANAGED_HEAD_ATTRIBUTE}]`))) {
     element.remove();
   }
@@ -602,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();
@@ -621,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) {
@@ -634,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);
@@ -649,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);
@@ -685,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;
 }
@@ -728,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 = href.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) {
@@ -749,6 +992,7 @@ var LinkComponent = import_react.default.forwardRef(function LinkInner(props, re
     state,
     mask,
     ignoreBlocker,
+    activeOptions,
     activeProps,
     children,
     onClick,
@@ -769,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);
@@ -794,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,
@@ -822,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) {
@@ -839,6 +1083,7 @@ function createLink(Component) {
       state,
       mask,
       ignoreBlocker,
+      activeOptions,
       activeProps,
       children,
       preload,
@@ -856,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") {
@@ -864,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) {