Add JSDoc to public API (#5561)

* Add documentation for React Router hooks and components

Co-authored-by: tannerlinsley <[email protected]>

* Remove redundant JSDoc comments from react-router

Co-authored-by: tannerlinsley <[email protected]>

---------

Co-authored-by: Cursor Agent <[email protected]>

Author: tannerlinsley

packages/react-router/src/Match.tsx

@@ -306,6 +306,12 @@ export const MatchInner = React.memo(function MatchInnerImpl({
   return out
 })
 
+/**
+ * Render the next child match in the route tree. Typically used inside
+ * a route component to render nested routes.
+ *
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/outletComponent
+ */
 export const Outlet = React.memo(function OutletImpl() {
   const router = useRouter()
   const matchId = React.useContext(matchContext)

packages/react-router/src/Matches.tsx

@@ -41,6 +41,10 @@ declare module '@tanstack/router-core' {
   }
 }
 
+/**
+ * Internal component that renders the router's active match tree with
+ * suspense, error, and not-found boundaries. Rendered by `RouterProvider`.
+ */
 export function Matches() {
   const router = useRouter()
   const rootRoute: AnyRoute = router.routesById[rootRouteId]
@@ -169,6 +173,13 @@ export type MakeMatchRouteOptions<
     | React.ReactNode
 }
 
+/**
+ * Component that conditionally renders its children based on whether a route
+ * matches the provided `from`/`to` options. If `children` is a function, it
+ * receives the matched params object.
+ *
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/matchRouteComponent
+ */
 export function MatchRoute<
   TRouter extends AnyRouter = RegisteredRouter,
   const TFrom extends string = string,
@@ -220,6 +231,13 @@ export function useMatches<
   } as any) as UseMatchesResult<TRouter, TSelected>
 }
 
+/**
+ * Read the full array of active route matches or select a derived subset.
+ *
+ * Useful for debugging, breadcrumbs, or aggregating metadata across matches.
+ *
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/useMatchesHook
+ */
 export function useParentMatches<
   TRouter extends AnyRouter = RegisteredRouter,
   TSelected = unknown,
@@ -242,6 +260,10 @@ export function useParentMatches<
   } as any)
 }
 
+/**
+ * Read the array of active route matches that are children of the current
+ * match (or selected parent) in the match tree.
+ */
 export function useChildMatches<
   TRouter extends AnyRouter = RegisteredRouter,
   TSelected = unknown,

packages/react-router/src/fileRoute.ts

@@ -35,6 +35,17 @@ import type { UseLoaderDepsRoute } from './useLoaderDeps'
 import type { UseLoaderDataRoute } from './useLoaderData'
 import type { UseRouteContextRoute } from './useRouteContext'
 
+/**
+ * Creates a file-based Route factory for a given path.
+ *
+ * Used by TanStack Router's file-based routing to associate a file with a
+ * route. The returned function accepts standard route options. In normal usage
+ * the `path` string is inserted and maintained by the `tsr` generator.
+ *
+ * @param path File path literal for the route (usually auto-generated).
+ * @returns A function that accepts Route options and returns a Route instance.
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createFileRouteFunction
+ */
 /**
  * Creates a file-based Route factory for a given path.
  *
@@ -66,6 +77,10 @@ export function createFileRoute<
   }).createRoute
 }
 
+/** 
+  @deprecated It's no longer recommended to use the `FileRoute` class directly.
+  Instead, use `createFileRoute('/path/to/file')(options)` to create a file route.
+*/
 /** 
   @deprecated It's no longer recommended to use the `FileRoute` class directly.
   Instead, use `createFileRoute('/path/to/file')(options)` to create a file route.
@@ -159,6 +174,11 @@ export class FileRoute<
   }
 }
 
+/** 
+  @deprecated It's recommended not to split loaders into separate files.
+  Instead, place the loader function in the the main route file, inside the
+  `createFileRoute('/path/to/file)(options)` options.
+*/
 /** 
   @deprecated It's recommended not to split loaders into separate files.
   Instead, place the loader function in the the main route file, inside the
@@ -264,6 +284,18 @@ export class LazyRoute<TRoute extends AnyRoute> {
   }
 }
 
+/**
+ * Creates a lazily-configurable code-based route stub by ID.
+ *
+ * Use this for code-splitting with code-based routes. The returned function
+ * accepts only non-critical route options like `component`, `pendingComponent`,
+ * `errorComponent`, and `notFoundComponent` which are applied when the route
+ * is matched.
+ *
+ * @param id Route ID string literal to associate with the lazy route.
+ * @returns A function that accepts lazy route options and returns a `LazyRoute`.
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createLazyRouteFunction
+ */
 /**
  * Creates a lazily-configurable code-based route stub by ID.
  *
@@ -289,6 +321,17 @@ export function createLazyRoute<
   }
 }
 
+/**
+ * Creates a lazily-configurable file-based route stub by file path.
+ *
+ * Use this for code-splitting with file-based routes (eg. `.lazy.tsx` files).
+ * The returned function accepts only non-critical route options like
+ * `component`, `pendingComponent`, `errorComponent`, and `notFoundComponent`.
+ *
+ * @param id File path literal for the route file.
+ * @returns A function that accepts lazy route options and returns a `LazyRoute`.
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/createLazyFileRouteFunction
+ */
 /**
  * Creates a lazily-configurable file-based route stub by file path.
  *

packages/react-router/src/lazyRouteComponent.tsx

@@ -2,6 +2,15 @@ import * as React from 'react'
 import { isModuleNotFoundError } from '@tanstack/router-core'
 import type { AsyncRouteComponent } from './route'
 
+/**
+ * Wrap a dynamic import to create a route component that supports
+ * `.preload()` and friendly reload-on-module-missing behavior.
+ *
+ * @param importer Function returning a module promise
+ * @param exportName Named export to use (default: `default`)
+ * @returns A lazy route component compatible with TanStack Router
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/lazyRouteComponentFunction
+ */
 export function lazyRouteComponent<
   T extends Record<string, any>,
   TKey extends keyof T = 'default',

packages/react-router/src/link.tsx

@@ -25,6 +25,18 @@ import type {
   ValidateLinkOptionsArray,
 } from './typePrimitives'
 
+/**
+ * Build anchor-like props for declarative navigation and preloading.
+ *
+ * Returns stable `href`, event handlers and accessibility props derived from
+ * router options and active state. Used internally by `Link` and custom links.
+ *
+ * Options cover `to`, `params`, `search`, `hash`, `state`, `preload`,
+ * `activeProps`, `inactiveProps`, and more.
+ *
+ * @returns React anchor props suitable for `<a>` or custom components.
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/useLinkPropsHook
+ */
 export function useLinkProps<
   TRouter extends AnyRouter = RegisteredRouter,
   const TFrom extends string = string,

packages/react-router/src/route.tsx

@@ -78,6 +78,24 @@ declare module '@tanstack/router-core' {
   }
 }
 
+/**
+ * Returns a route-specific API that exposes type-safe hooks pre-bound
+ * to a single route ID. Useful for consuming a route's APIs from files
+ * where the route object isn't directly imported (e.g. code-split files).
+ *
+ * @param id Route ID string literal for the target route.
+ * @returns A `RouteApi` instance bound to the given route ID.
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/getRouteApiFunction
+ */
+/**
+ * Returns a route-specific API that exposes type-safe hooks pre-bound
+ * to a single route ID. Useful for consuming a route's APIs from files
+ * where the route object isn't directly imported (e.g. code-split files).
+ *
+ * @param id Route ID string literal for the target route.
+ * @returns A `RouteApi` instance bound to the given route ID.
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/getRouteApiFunction
+ */
 /**
  * Returns a route-specific API that exposes type-safe hooks pre-bound
  * to a single route ID. Useful for consuming a route's APIs from files

packages/react-router/src/useLoaderData.tsx

@@ -54,6 +54,17 @@ export type UseLoaderDataRoute<out TId> = <
     StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
 ) => UseLoaderDataResult<TRouter, TId, true, TSelected>
 
+/**
+ * Read and select the current route's loader data with type‑safety.
+ *
+ * Options:
+ * - `from`/`strict`: Choose which route's data to read and strictness
+ * - `select`: Map the loader data to a derived value
+ * - `structuralSharing`: Enable structural sharing for stable references
+ *
+ * @returns The loader data (or selected value) for the matched route.
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/useLoaderDataHook
+ */
 export function useLoaderData<
   TRouter extends AnyRouter = RegisteredRouter,
   const TFrom extends string | undefined = undefined,

packages/react-router/src/useLoaderDeps.tsx

@@ -40,6 +40,17 @@ export type UseLoaderDepsRoute<out TId> = <
     StructuralSharingOption<TRouter, TSelected, false>,
 ) => UseLoaderDepsResult<TRouter, TId, TSelected>
 
+/**
+ * Read and select the current route's loader dependencies object.
+ *
+ * Options:
+ * - `from`: Choose which route's loader deps to read
+ * - `select`: Map the deps to a derived value
+ * - `structuralSharing`: Enable structural sharing for stable references
+ *
+ * @returns The loader deps (or selected value) for the matched route.
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/useLoaderDepsHook
+ */
 export function useLoaderDeps<
   TRouter extends AnyRouter = RegisteredRouter,
   const TFrom extends string | undefined = undefined,

packages/react-router/src/useLocation.tsx

@@ -26,6 +26,17 @@ export type UseLocationResult<
   ? RouterState<TRouter['routeTree']>['location']
   : TSelected
 
+/**
+ * Read the current location from the router state with optional selection.
+ * Useful for subscribing to just the pieces of location you care about.
+ *
+ * Options:
+ * - `select`: Project the `location` object to a derived value
+ * - `structuralSharing`: Enable structural sharing for stable references
+ *
+ * @returns The current location (or selected value).
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/useLocationHook
+ */
 export function useLocation<
   TRouter extends AnyRouter = RegisteredRouter,
   TSelected = unknown,

packages/react-router/src/useMatch.tsx

@@ -75,6 +75,18 @@ export type UseMatchResult<
     : MakeRouteMatchUnion<TRouter>
   : TSelected
 
+/**
+ * Read and select the nearest or targeted route match.
+ *
+ * Options:
+ * - `from`/`strict`: Target a specific route ID and control union vs. exact typing
+ * - `select`: Project the match object to a derived value
+ * - `shouldThrow`: Throw if the match is not found in strict contexts
+ * - `structuralSharing`: Enable structural sharing for stable references
+ *
+ * @returns The active match (or selected value).
+ * @link https://tanstack.com/router/latest/docs/framework/react/api/router/useMatchHook
+ */
 export function useMatch<
   TRouter extends AnyRouter = RegisteredRouter,
   const TFrom extends string | undefined = undefined,