Skip to content

Commit 309db13

Browse files
Add documentation for createLink, Link, useNavigate, and Navigate
Co-authored-by: tannerlinsley <tannerlinsley@gmail.com>
1 parent 521e737 commit 309db13

File tree

2 files changed

+47
-0
lines changed

2 files changed

+47
-0
lines changed

packages/react-router/src/link.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -514,6 +514,18 @@ export interface LinkComponentRoute<
514514
): React.ReactElement
515515
}
516516

517+
/**
518+
* Creates a typed Link-like component that preserves TanStack Router's
519+
* navigation semantics and type-safety while delegating rendering to the
520+
* provided host component.
521+
*
522+
* Useful for integrating design system anchors/buttons while keeping
523+
* router-aware props (eg. `to`, `params`, `search`, `preload`).
524+
*
525+
* @param Comp The host component to render (eg. a design-system Link/Button)
526+
* @returns A router-aware component with the same API as `Link`.
527+
* @link https://tanstack.com/router/latest/docs/framework/react/guide/custom-link
528+
*/
517529
export function createLink<const TComp>(
518530
Comp: Constrain<TComp, any, (props: CreateLinkProps) => ReactNode>,
519531
): LinkComponent<TComp> {
@@ -522,6 +534,22 @@ export function createLink<const TComp>(
522534
}) as any
523535
}
524536

537+
/**
538+
* A strongly-typed anchor component for declarative navigation.
539+
* Handles path, search, hash and state updates with optional route preloading
540+
* and active-state styling.
541+
*
542+
* Non-obvious props include:
543+
* - `preload`: Controls route preloading (eg. 'intent', 'render', 'viewport', true/false)
544+
* - `preloadDelay`: Delay in ms before preloading on hover
545+
* - `activeProps`/`inactiveProps`: Additional props merged when link is active/inactive
546+
* - `resetScroll`/`hashScrollIntoView`: Control scroll behavior on navigation
547+
* - `viewTransition`/`startTransition`: Use View Transitions/React transitions for navigation
548+
* - `ignoreBlocker`: Bypass registered blockers
549+
*
550+
* @returns An anchor-like element that navigates without full page reloads.
551+
* @link https://tanstack.com/router/latest/docs/framework/react/api/router/linkComponent
552+
*/
525553
export const Link: LinkComponent<'a'> = React.forwardRef<Element, any>(
526554
(props, ref) => {
527555
const { _asChild, ...rest } = props

packages/react-router/src/useNavigate.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@ import type {
88
UseNavigateResult,
99
} from '@tanstack/router-core'
1010

11+
/**
12+
* React hook that returns a `navigate` function for programmatic navigation.
13+
* Supports updating pathname, search, hash and state with full type-safety.
14+
*
15+
* Options:
16+
* - `from`: Default base path used to resolve relative `to` destinations.
17+
*
18+
* @returns A memoized `navigate` function.
19+
* @link https://tanstack.com/router/latest/docs/framework/react/api/router/useNavigateHook
20+
*/
1121
export function useNavigate<
1222
TRouter extends AnyRouter = RegisteredRouter,
1323
TDefaultFrom extends string = string,
@@ -27,6 +37,15 @@ export function useNavigate<
2737
) as UseNavigateResult<TDefaultFrom>
2838
}
2939

40+
/**
41+
* Component that triggers a navigation when rendered. Navigation executes
42+
* in an effect after mount/update.
43+
*
44+
* Props are the same as `NavigateOptions` used by `navigate()`.
45+
*
46+
* @returns null
47+
* @link https://tanstack.com/router/latest/docs/framework/react/api/router/navigateComponent
48+
*/
3049
export function Navigate<
3150
TRouter extends AnyRouter = RegisteredRouter,
3251
const TFrom extends string = string,

0 commit comments

Comments
 (0)