Repository: remix-run/react-router
File: packages/react-router/lib/dom/ssr/components.tsx (TypeScript)

Code before:
}

/**
  Renders `<link rel=prefetch|modulepreload>` tags for modules and data of another page to enable an instant navigation to that page. {@link LinkProps.prefetch | `<Link prefetch>`} uses this internally, but you can render it to prefetch a page for any other reason.

  ```tsx
  import { PrefetchPageLinks } from "react-router"

  <PrefetchPageLinks page="/absolute/path" />
  ```

  For example, you may render one of this as the user types into a search field to prefetch search results before they click through to their selection.

  @category Components
 */
export function PrefetchPageLinks({
  page,
  ...dataLinkProps
}: PageLinkDescriptor) {
  let { router } = useDataRouterContext();
  let matches = React.useMemo(
    () => matchRoutes(router.routes, page, router.basename),
    [router.routes, page, router.basename],
  );

  if (!matches) {
    return null;
  }

  return (
    <PrefetchPageLinksImpl page={page} matches={matches} {...dataLinkProps} />
  );
}

function useKeyedPrefetchLinks(matches: AgnosticDataRouteMatch[]) {
  let { manifest, routeModules } = useFrameworkContext();

  let [keyedPrefetchLinks, setKeyedPrefetchLinks] = React.useState<
    KeyedHtmlLinkDescriptor[]
  >([]);

  React.useEffect(() => {
    let interrupted: boolean = false;

    void getKeyedPrefetchLinks(matches, manifest, routeModules).then(
      (links) => {
        if (!interrupted) {
          setKeyedPrefetchLinks(links);
        }
      },
    );

Review comment (suggestion):
@brophdawg11 This is not an actual prop you can pass, it's a collection of props (it's used as a rest operator)

Code after:
        ),
      )}
    </>
  );
}

/**
 * Renders `<link rel=prefetch|modulepreload>` tags for modules and data of
 * another page to enable an instant navigation to that page.
 * [`<Link prefetch>`](../../components/Link#prefetch) uses this internally, but
 * you can render it to prefetch a page for any other reason.
 *
 * For example, you may render one of this as the user types into a search field
 * to prefetch search results before they click through to their selection.
 *
 * @example
 * import { PrefetchPageLinks } from "react-router";
 *
 * <PrefetchPageLinks page="/absolute/path" />
 *
 * @public
 * @category Components
 * @mode framework
 * @param props Props
 * @param props.page The absolute path of the page to prefetch, e.g. `/absolute/path`.
 * @param props.dataLinkProps Additional props to pass to the
 * [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link)
 * tag, such as `crossOrigin`, `integrity`, `rel`, etc.
 * @returns A collection of React elements for `<link>` tags
 */
export function PrefetchPageLinks({
  page,
  ...dataLinkProps
}: PageLinkDescriptor) {
  let { router } = useDataRouterContext();
  let matches = React.useMemo(
    () => matchRoutes(router.routes, page, router.basename),
    [router.routes, page, router.basename],
  );

  if (!matches) {
    return null;
  }

  return (
    <PrefetchPageLinksImpl page={page} matches={matches} {...dataLinkProps} />
  );
}

function useKeyedPrefetchLinks(matches: AgnosticDataRouteMatch[]) {
  let { manifest, routeModules } = useFrameworkContext();