docs(router): update types for RouteOptions and RouteMatch (#4754)

leesb971204 · SeanCassiere · web-flow · commit 68fd70bf8e31 · 2025-07-23T23:41:22.000+12:00
Closes #3811 --------- Signed-off-by: leesb971204 <leesb971204@gmail.com> Co-authored-by: Sean Cassiere <33615041+SeanCassiere@users.noreply.github.com>
diff --git a/docs/router/framework/react/api/router/RouteMatchType.md b/docs/router/framework/react/api/router/RouteMatchType.md
@@ -11,8 +11,8 @@ interface RouteMatch {
   routeId: string
   pathname: string
   params: Route['allParams']
-  status: 'pending' | 'success' | 'error'
-  isFetching: boolean
+  status: 'pending' | 'success' | 'error' | 'redirected' | 'notFound'
+  isFetching: false | 'beforeLoad' | 'loader'
   showPending: boolean
   error: unknown
   paramsError: unknown
@@ -25,5 +25,6 @@ interface RouteMatch {
   fetchedAt: number
   abortController: AbortController
   cause: 'enter' | 'stay'
+  ssr?: boolean | 'data-only'
 }
 ```
diff --git a/docs/router/framework/react/api/router/RouteOptionsType.md b/docs/router/framework/react/api/router/RouteOptionsType.md
@@ -300,3 +300,69 @@ If you want to configure to remount a route component upon `params` change, use:
 ```tsx
 remountDeps: ({ params }) => params
 ```
+
+### `headers` method
+
+- Type:
+
+```tsx
+type headers = (opts: {
+  matches: Array<RouteMatch>
+  match: RouteMatch
+  params: TAllParams
+  loaderData?: TLoaderData
+}) => Promise<Record<string, string>> | Record<string, string>
+```
+
+- Optional
+- Allows you to specify custom HTTP headers to be sent when this route is rendered during SSR. The function receives the current match context and should return a plain object of header name/value pairs.
+
+### `head` method
+
+- Type:
+
+```tsx
+type head = (ctx: {
+  matches: Array<RouteMatch>
+  match: RouteMatch
+  params: TAllParams
+  loaderData?: TLoaderData
+}) =>
+  | Promise<{
+      links?: RouteMatch['links']
+      scripts?: RouteMatch['headScripts']
+      meta?: RouteMatch['meta']
+      styles?: RouteMatch['styles']
+    }>
+  | {
+      links?: RouteMatch['links']
+      scripts?: RouteMatch['headScripts']
+      meta?: RouteMatch['meta']
+      styles?: RouteMatch['styles']
+    }
+```
+
+- Optional
+- Returns additional elements to inject into the document `<head>` for this route. Use it to add route-level SEO metadata, preload links, inline styles, or custom scripts.
+
+### `scripts` method
+
+- Type:
+
+```tsx
+type scripts = (ctx: {
+  matches: Array<RouteMatch>
+  match: RouteMatch
+  params: TAllParams
+  loaderData?: TLoaderData
+}) => Promise<RouteMatch['scripts']> | RouteMatch['scripts']
+```
+
+- Optional
+- A shorthand helper to return only `<script>` elements. Equivalent to returning the `scripts` field from the `head` method.
+
+### `codeSplitGroupings` property
+
+- Type: `Array<Array<'loader' | 'component' | 'pendingComponent' | 'notFoundComponent' | 'errorComponent'>>`
+- Optional
+- Fine-grained control over how the router groups lazy-loaded pieces of a route into chunks. Each inner array represents a group of assets that will be placed into the same bundle during code-splitting.
diff --git a/docs/router/framework/react/guide/document-head-management.md b/docs/router/framework/react/guide/document-head-management.md
@@ -43,9 +43,9 @@ export const Route = createRootRoute({
         children: `p {
                   color: blue;
                   background-color: yellow;
-                }`
-      }
-    ]
+                }`,
+      },
+    ],
     scripts: [
       {
         src: 'https://www.google-analytics.com/analytics.js',
