diff --git a/docs/router/eslint/eslint-plugin-router.md b/docs/router/eslint/eslint-plugin-router.md index 562a5e744b1..6db567a7779 100644 --- a/docs/router/eslint/eslint-plugin-router.md +++ b/docs/router/eslint/eslint-plugin-router.md @@ -102,7 +102,7 @@ Alternatively, add `@tanstack/eslint-plugin-router` to the plugins section, and The following rules are available in the TanStack Router ESLint Plugin: -- [@tanstack/router/create-route-property-order](../create-route-property-order.md) +- [@tanstack/router/create-route-property-order](./create-route-property-order.md) ## Conflicts with other ESLint plugins diff --git a/docs/router/framework/react/api/router.md b/docs/router/framework/react/api/router.md index e760a073788..950c493f8a5 100644 --- a/docs/router/framework/react/api/router.md +++ b/docs/router/framework/react/api/router.md @@ -4,86 +4,86 @@ title: Router API --- - Functions - - [`createFileRoute`](../router/createFileRouteFunction.md) - - [`createLazyFileRoute`](../router/createLazyFileRouteFunction.md) - - [`createRootRoute`](../router/createRootRouteFunction.md) - - [`createRootRouteWithContext`](../router/createRootRouteWithContextFunction.md) - - [`createRoute`](../router/createRouteFunction.md) - - [`createLazyRoute`](../router/createLazyRouteFunction.md) - - [`createRouteMask`](../router/createRouteMaskFunction.md) - - [`createRouter`](../router/createRouterFunction.md) - - [`defer`](../router/deferFunction.md) - - [`getRouteApi`](../router/getRouteApiFunction.md) - - [`isNotFound`](../router/isNotFoundFunction.md) - - [`isRedirect`](../router/isRedirectFunction.md) - - [`lazyRouteComponent`](../router/lazyRouteComponentFunction.md) - - [`linkOptions`](../router/linkOptions.md) - - [`notFound`](../router/notFoundFunction.md) - - [`redirect`](../router/redirectFunction.md) - - [`retainSearchParams`](../router/retainSearchParamsFunction.md) - - [`stripSearchParams`](../router/stripSearchParamsFunction.md) + - [`createFileRoute`](./router/createFileRouteFunction.md) + - [`createLazyFileRoute`](./router/createLazyFileRouteFunction.md) + - [`createRootRoute`](./router/createRootRouteFunction.md) + - [`createRootRouteWithContext`](./router/createRootRouteWithContextFunction.md) + - [`createRoute`](./router/createRouteFunction.md) + - [`createLazyRoute`](./router/createLazyRouteFunction.md) + - [`createRouteMask`](./router/createRouteMaskFunction.md) + - [`createRouter`](./router/createRouterFunction.md) + - [`defer`](./router/deferFunction.md) + - [`getRouteApi`](./router/getRouteApiFunction.md) + - [`isNotFound`](./router/isNotFoundFunction.md) + - [`isRedirect`](./router/isRedirectFunction.md) + - [`lazyRouteComponent`](./router/lazyRouteComponentFunction.md) + - [`linkOptions`](./router/linkOptions.md) + - [`notFound`](./router/notFoundFunction.md) + - [`redirect`](./router/redirectFunction.md) + - [`retainSearchParams`](./router/retainSearchParamsFunction.md) + - [`stripSearchParams`](./router/stripSearchParamsFunction.md) - Components - - [``](../router/awaitComponent.md) - - [``](../router/catchBoundaryComponent.md) - - [``](../router/catchNotFoundComponent.md) - - [``](../router/clientOnlyComponent.md) - - [``](../router/defaultGlobalNotFoundComponent.md) - - [``](../router/errorComponentComponent.md) - - [``](../router/linkComponent.md) - - [``](../router/matchRouteComponent.md) - - [``](../router/navigateComponent.md) - - [``](../router/notFoundComponentComponent.md) - - [``](../router/outletComponent.md) + - [``](./router/awaitComponent.md) + - [``](./router/catchBoundaryComponent.md) + - [``](./router/catchNotFoundComponent.md) + - [``](./router/clientOnlyComponent.md) + - [``](./router/defaultGlobalNotFoundComponent.md) + - [``](./router/errorComponentComponent.md) + - [``](./router/linkComponent.md) + - [``](./router/matchRouteComponent.md) + - [``](./router/navigateComponent.md) + - [``](./router/notFoundComponentComponent.md) + - [``](./router/outletComponent.md) - Hooks - - [`useAwaited`](../router/useAwaitedHook.md) - - [`useBlocker`](../router/useBlockerHook.md) - - [`useCanGoBack`](../router//useCanGoBack.md) - - [`useChildMatches`](../router/useChildMatchesHook.md) - - [`useLinkProps`](../router/useLinkPropsHook.md) - - [`useLoaderData`](../router/useLoaderDataHook.md) - - [`useLoaderDeps`](../router/useLoaderDepsHook.md) - - [`useLocation`](../router/useLocationHook.md) - - [`useMatch`](../router/useMatchHook.md) - - [`useMatchRoute`](../router/useMatchRouteHook.md) - - [`useMatches`](../router/useMatchesHook.md) - - [`useNavigate`](../router/useNavigateHook.md) - - [`useParentMatches`](../router/useParentMatchesHook.md) - - [`useParams`](../router/useParamsHook.md) - - [`useRouteContext`](../router/useRouteContextHook.md) - - [`useRouter`](../router/useRouterHook.md) - - [`useRouterState`](../router/useRouterStateHook.md) - - [`useSearch`](../router/useSearchHook.md) + - [`useAwaited`](./router/useAwaitedHook.md) + - [`useBlocker`](./router/useBlockerHook.md) + - [`useCanGoBack`](./router//useCanGoBack.md) + - [`useChildMatches`](./router/useChildMatchesHook.md) + - [`useLinkProps`](./router/useLinkPropsHook.md) + - [`useLoaderData`](./router/useLoaderDataHook.md) + - [`useLoaderDeps`](./router/useLoaderDepsHook.md) + - [`useLocation`](./router/useLocationHook.md) + - [`useMatch`](./router/useMatchHook.md) + - [`useMatchRoute`](./router/useMatchRouteHook.md) + - [`useMatches`](./router/useMatchesHook.md) + - [`useNavigate`](./router/useNavigateHook.md) + - [`useParentMatches`](./router/useParentMatchesHook.md) + - [`useParams`](./router/useParamsHook.md) + - [`useRouteContext`](./router/useRouteContextHook.md) + - [`useRouter`](./router/useRouterHook.md) + - [`useRouterState`](./router/useRouterStateHook.md) + - [`useSearch`](./router/useSearchHook.md) - Types - - [`ActiveLinkOptions Type`](../router/ActiveLinkOptionsType.md) - - [`AsyncRouteComponent Type`](../router/AsyncRouteComponentType.md) - - [`HistoryState Interface`](../router/historyStateInterface.md) - - [`LinkOptions Type`](../router/LinkOptionsType.md) - - [`LinkProps Type`](../router/LinkPropsType.md) - - [`MatchRouteOptions Type`](../router/MatchRouteOptionsType.md) - - [`NavigateOptions Type`](../router/NavigateOptionsType.md) - - [`NotFoundError Type`](../router/NotFoundErrorType.md) - - [`ParsedHistoryState Type`](../router/ParsedHistoryStateType.md) - - [`ParsedLocation Type`](../router/ParsedLocationType.md) - - [`Redirect Type`](../router/RedirectType.md) - - [`Register Type`](../router/RegisterType.md) - - [`Route Type`](../router/RouteType.md) - - [`RouteApi Type`](../router/RouteApiType.md) - - [`RouteMask Type`](../router/RouteMaskType.md) - - [`RouteMatch Type`](../router/RouteMatchType.md) - - [`RouteOptions Type`](../router/RouteOptionsType.md) - - [`Router Type`](../router/RouterType.md) - - [`RouterEvents Type`](../router/RouterEventsType.md) - - [`RouterOptions Type`](../router/RouterOptionsType.md) - - [`RouterState Type`](../router/RouterStateType.md) - - [`ToMaskOptions Type`](../router/ToMaskOptionsType.md) - - [`ToOptions Type`](../router/ToOptionsType.md) - - [`UseMatchRouteOptions Type`](../router/UseMatchRouteOptionsType.md) - - [`ViewTransitionOptions Type`](../router/ViewTransitionOptionsType.md) + - [`ActiveLinkOptions Type`](./router/ActiveLinkOptionsType.md) + - [`AsyncRouteComponent Type`](./router/AsyncRouteComponentType.md) + - [`HistoryState Interface`](./router/historyStateInterface.md) + - [`LinkOptions Type`](./router/LinkOptionsType.md) + - [`LinkProps Type`](./router/LinkPropsType.md) + - [`MatchRouteOptions Type`](./router/MatchRouteOptionsType.md) + - [`NavigateOptions Type`](./router/NavigateOptionsType.md) + - [`NotFoundError Type`](./router/NotFoundErrorType.md) + - [`ParsedHistoryState Type`](./router/ParsedHistoryStateType.md) + - [`ParsedLocation Type`](./router/ParsedLocationType.md) + - [`Redirect Type`](./router/RedirectType.md) + - [`Register Type`](./router/RegisterType.md) + - [`Route Type`](./router/RouteType.md) + - [`RouteApi Type`](./router/RouteApiType.md) + - [`RouteMask Type`](./router/RouteMaskType.md) + - [`RouteMatch Type`](./router/RouteMatchType.md) + - [`RouteOptions Type`](./router/RouteOptionsType.md) + - [`Router Type`](./router/RouterType.md) + - [`RouterEvents Type`](./router/RouterEventsType.md) + - [`RouterOptions Type`](./router/RouterOptionsType.md) + - [`RouterState Type`](./router/RouterStateType.md) + - [`ToMaskOptions Type`](./router/ToMaskOptionsType.md) + - [`ToOptions Type`](./router/ToOptionsType.md) + - [`UseMatchRouteOptions Type`](./router/UseMatchRouteOptionsType.md) + - [`ViewTransitionOptions Type`](./router/ViewTransitionOptionsType.md) - ⚠️ Deprecated - - [`FileRoute Class`](../router/FileRouteClass.md) - - [`Route Class`](../router/RouteClass.md) - - [`Router Class`](../router/RouterClass.md) - - [`RouteApi Class`](../router/RouteApiClass.md) - - [`RootRoute Class`](../router/RootRouteClass.md) - - [`NotFoundRoute Class`](../router/NotFoundRouteClass.md) - - [`rootRouteWithContext Function`](../router/rootRouteWithContextFunction.md) + - [`FileRoute Class`](./router/FileRouteClass.md) + - [`Route Class`](./router/RouteClass.md) + - [`Router Class`](./router/RouterClass.md) + - [`RouteApi Class`](./router/RouteApiClass.md) + - [`RootRoute Class`](./router/RootRouteClass.md) + - [`NotFoundRoute Class`](./router/NotFoundRouteClass.md) + - [`rootRouteWithContext Function`](./router/rootRouteWithContextFunction.md) diff --git a/docs/router/framework/react/api/router/ActiveLinkOptionsType.md b/docs/router/framework/react/api/router/ActiveLinkOptionsType.md index 8f673799e0e..01434bf41aa 100644 --- a/docs/router/framework/react/api/router/ActiveLinkOptionsType.md +++ b/docs/router/framework/react/api/router/ActiveLinkOptionsType.md @@ -3,7 +3,7 @@ id: ActiveLinkOptionsType title: ActiveLinkOptions type --- -The `ActiveLinkOptions` type extends the [`LinkOptions`](../LinkOptionsType.md) type and contains additional options that can be used to describe how a link should be styled when it is active. +The `ActiveLinkOptions` type extends the [`LinkOptions`](./LinkOptionsType.md) type and contains additional options that can be used to describe how a link should be styled when it is active. ```tsx type ActiveLinkOptions = LinkOptions & { diff --git a/docs/router/framework/react/api/router/FileRouteClass.md b/docs/router/framework/react/api/router/FileRouteClass.md index 47f565137f9..d7745b45802 100644 --- a/docs/router/framework/react/api/router/FileRouteClass.md +++ b/docs/router/framework/react/api/router/FileRouteClass.md @@ -5,7 +5,7 @@ title: FileRoute class > [!CAUTION] > This class has been deprecated and will be removed in the next major version of TanStack Router. -> Please use the [`createFileRoute`](../createFileRouteFunction.md) function instead. +> Please use the [`createFileRoute`](./createFileRouteFunction.md) function instead. The `FileRoute` class is a factory that can be used to create a file-based route instance. This route instance can then be used to automatically generate a route tree with the `tsr generate` and `tsr watch` commands. @@ -34,13 +34,13 @@ The `createRoute` method is a method that can be used to configure the file rout #### .createRoute options - Type: `Omit` -- [`RouteOptions`](../RouteOptionsType.md) +- [`RouteOptions`](./RouteOptionsType.md) - Optional - The same options that are available to the `Route` class, but with the `getParentRoute`, `path`, and `id` options omitted since they are unnecessary for file-based routing. #### .createRoute returns -A [`Route`](../RouteType.md) instance that can be used to configure the route to be inserted into the route-tree. +A [`Route`](./RouteType.md) instance that can be used to configure the route to be inserted into the route-tree. > ⚠️ Note: For `tsr generate` and `tsr watch` to work properly, the file route instance must be exported from the file using the `Route` identifier. diff --git a/docs/router/framework/react/api/router/LinkOptionsType.md b/docs/router/framework/react/api/router/LinkOptionsType.md index 5f81578140c..481a5b4a3db 100644 --- a/docs/router/framework/react/api/router/LinkOptionsType.md +++ b/docs/router/framework/react/api/router/LinkOptionsType.md @@ -3,7 +3,7 @@ id: LinkOptionsType title: LinkOptions type --- -The `LinkOptions` type extends the [`NavigateOptions`](../NavigateOptionsType.md) type and contains additional options that can be used by TanStack Router when handling actual anchor element attributes. +The `LinkOptions` type extends the [`NavigateOptions`](./NavigateOptionsType.md) type and contains additional options that can be used by TanStack Router when handling actual anchor element attributes. ```tsx type LinkOptions = NavigateOptions & { @@ -36,7 +36,7 @@ The `LinkOptions` object accepts/contains the following properties: - Type: `false | 'intent' | 'viewport' | 'render'` - Optional - If set, the link's preloading strategy will be set to this value. -- See the [Preloading guide](../../../guide/preloading.md) for more information. +- See the [Preloading guide](../../guide/preloading.md) for more information. ### `preloadDelay` diff --git a/docs/router/framework/react/api/router/LinkPropsType.md b/docs/router/framework/react/api/router/LinkPropsType.md index 4866cb400b6..e8df561a97d 100644 --- a/docs/router/framework/react/api/router/LinkPropsType.md +++ b/docs/router/framework/react/api/router/LinkPropsType.md @@ -3,7 +3,7 @@ id: LinkPropsType title: LinkProps type --- -The `LinkProps` type extends the [`ActiveLinkOptions`](../ActiveLinkOptionsType.md) and `React.AnchorHTMLAttributes` types and contains additional props specific to the `Link` component. +The `LinkProps` type extends the [`ActiveLinkOptions`](./ActiveLinkOptionsType.md) and `React.AnchorHTMLAttributes` types and contains additional props specific to the `Link` component. ```tsx type LinkProps = ActiveLinkOptions & @@ -16,7 +16,7 @@ type LinkProps = ActiveLinkOptions & ## LinkProps properties -- All of the props from [`ActiveLinkOptions`](../ActiveLinkOptionsType.md) +- All of the props from [`ActiveLinkOptions`](./ActiveLinkOptionsType.md) - All of the props from `React.AnchorHTMLAttributes` #### `children` diff --git a/docs/router/framework/react/api/router/NavigateOptionsType.md b/docs/router/framework/react/api/router/NavigateOptionsType.md index a06692c3a56..e9c3470e181 100644 --- a/docs/router/framework/react/api/router/NavigateOptionsType.md +++ b/docs/router/framework/react/api/router/NavigateOptionsType.md @@ -50,7 +50,7 @@ The `NavigateOptions` object accepts the following properties: - Optional - Defaults to `false`. - If `true`, navigation will be called using `document.startViewTransition()`. -- If [`ViewTransitionOptions`](../ViewTransitionOptionsType.md), route navigations will be called using `document.startViewTransition({update, types})` where `types` will determine the strings array passed with `ViewTransitionOptions["types"]`. If the browser does not support viewTransition types, the navigation will fall back to normal `document.startTransition()`, same as if `true` was passed. +- If [`ViewTransitionOptions`](./ViewTransitionOptionsType.md), route navigations will be called using `document.startViewTransition({update, types})` where `types` will determine the strings array passed with `ViewTransitionOptions["types"]`. If the browser does not support viewTransition types, the navigation will fall back to normal `document.startTransition()`, same as if `true` was passed. - If the browser does not support this api, this option will be ignored. - See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for more information on how this function works. - See [Google](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types) for more information on viewTransition types @@ -75,4 +75,4 @@ The `NavigateOptions` object accepts the following properties: - Optional - This can be used instead of `to` to navigate to a fully built href, e.g. pointing to an external target. -- [`ToOptions`](../ToOptionsType.md) +- [`ToOptions`](./ToOptionsType.md) diff --git a/docs/router/framework/react/api/router/NotFoundRouteClass.md b/docs/router/framework/react/api/router/NotFoundRouteClass.md index bfe954ba000..1efe0e5dae1 100644 --- a/docs/router/framework/react/api/router/NotFoundRouteClass.md +++ b/docs/router/framework/react/api/router/NotFoundRouteClass.md @@ -6,7 +6,7 @@ title: NotFoundRoute class > [!CAUTION] > This class has been deprecated and will be removed in the next major version of TanStack Router. > Please use the `notFoundComponent` route option that is present during route configuration. -> See the [Not Found Errors guide](../../../guide/not-found-errors.md) for more information. +> See the [Not Found Errors guide](../../guide/not-found-errors.md) for more information. The `NotFoundRoute` class extends the `Route` class and can be used to create a not found route instance. A not found route instance can be passed to the `routerOptions.notFoundRoute` option to configure a default not-found/404 route for every branch of the route tree. @@ -28,7 +28,7 @@ Omit< > ``` -- [RouteOptions](../RouteOptionsType.md) +- [RouteOptions](./RouteOptionsType.md) - Required - The options that will be used to configure the not found route instance. diff --git a/docs/router/framework/react/api/router/RedirectType.md b/docs/router/framework/react/api/router/RedirectType.md index 0435eb4910a..021c4ccd25b 100644 --- a/docs/router/framework/react/api/router/RedirectType.md +++ b/docs/router/framework/react/api/router/RedirectType.md @@ -13,7 +13,7 @@ export type Redirect = { } & NavigateOptions ``` -- [`NavigateOptions`](../NavigateOptionsType.md) +- [`NavigateOptions`](./NavigateOptionsType.md) ## Redirect properties diff --git a/docs/router/framework/react/api/router/RootRouteClass.md b/docs/router/framework/react/api/router/RootRouteClass.md index c0e7e2e6f36..1553dd2550b 100644 --- a/docs/router/framework/react/api/router/RootRouteClass.md +++ b/docs/router/framework/react/api/router/RootRouteClass.md @@ -5,7 +5,7 @@ title: RootRoute class > [!CAUTION] > This class has been deprecated and will be removed in the next major version of TanStack Router. -> Please use the [`createRootRoute`](../createRootRouteFunction.md) function instead. +> Please use the [`createRootRoute`](./createRootRouteFunction.md) function instead. The `RootRoute` class extends the `Route` class and can be used to create a root route instance. A root route instance can then be used to create a route tree. @@ -31,12 +31,12 @@ Omit< > ``` -- [`RouteOptions`](../RouteOptionsType.md) +- [`RouteOptions`](./RouteOptionsType.md) - Optional ## Constructor returns -A new [`Route`](../RouteType.md) instance. +A new [`Route`](./RouteType.md) instance. ## Examples diff --git a/docs/router/framework/react/api/router/RouteApiClass.md b/docs/router/framework/react/api/router/RouteApiClass.md index 60fa5144056..387089cdf3a 100644 --- a/docs/router/framework/react/api/router/RouteApiClass.md +++ b/docs/router/framework/react/api/router/RouteApiClass.md @@ -5,7 +5,7 @@ title: RouteApi class > [!CAUTION] > This class has been deprecated and will be removed in the next major version of TanStack Router. -> Please use the [`getRouteApi`](../getRouteApiFunction.md) function instead. +> Please use the [`getRouteApi`](./getRouteApiFunction.md) function instead. The `RouteApi` class provides type-safe version of common hooks like `useParams`, `useSearch`, `useRouteContext`, `useNavigate`, `useLoaderData`, and `useLoaderDeps` that are pre-bound to a specific route ID and corresponding registered route types. @@ -21,7 +21,7 @@ The `RouteApi` constructor accepts a single argument: the `options` that will be ## Constructor returns -- An instance of the [`RouteApi`](../RouteApiType.md) that is pre-bound to the route ID that it was called with. +- An instance of the [`RouteApi`](./RouteApiType.md) that is pre-bound to the route ID that it was called with. ## Examples diff --git a/docs/router/framework/react/api/router/RouteApiType.md b/docs/router/framework/react/api/router/RouteApiType.md index 36e1f4c78e8..a5d806397bf 100644 --- a/docs/router/framework/react/api/router/RouteApiType.md +++ b/docs/router/framework/react/api/router/RouteApiType.md @@ -17,7 +17,7 @@ The `RouteApi` has the following properties and methods: }): TSelected ``` -- A type-safe version of the [`useMatch`](../useMatchHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with. +- A type-safe version of the [`useMatch`](./useMatchHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with. - Options - `opts.select` - Optional @@ -27,7 +27,7 @@ The `RouteApi` has the following properties and methods: - Optional - `boolean` - Configures whether structural sharing is enabled for the value returned by `select`. - - See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. + - See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. - Returns - If a `select` function is provided, the return value of the `select` function. - If no `select` function is provided, the `RouteMatch` object or a loosened version of the `RouteMatch` object if `opts.strict` is `false`. @@ -40,7 +40,7 @@ The `RouteApi` has the following properties and methods: }): TSelected ``` -- A type-safe version of the [`useRouteContext`](../useRouteContextHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with. +- A type-safe version of the [`useRouteContext`](./useRouteContextHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with. - Options - `opts.select` - Optional @@ -58,7 +58,7 @@ The `RouteApi` has the following properties and methods: }): TSelected ``` -- A type-safe version of the [`useSearch`](../useSearchHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with. +- A type-safe version of the [`useSearch`](./useSearchHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with. - Options - `opts.select` - Optional @@ -68,7 +68,7 @@ The `RouteApi` has the following properties and methods: - Optional - `boolean` - Configures whether structural sharing is enabled for the value returned by `select`. - - See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. + - See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. - Returns - If a `select` function is provided, the return value of the `select` function. - If no `select` function is provided, the `TFullSearchSchema` object or a loosened version of the `TFullSearchSchema` object if `opts.strict` is `false`. @@ -81,7 +81,7 @@ The `RouteApi` has the following properties and methods: }): TSelected ``` -- A type-safe version of the [`useParams`](../useParamsHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with. +- A type-safe version of the [`useParams`](./useParamsHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with. - Options - `opts.select` - Optional @@ -91,7 +91,7 @@ The `RouteApi` has the following properties and methods: - Optional - `boolean` - Configures whether structural sharing is enabled for the value returned by `select`. - - See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. + - See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. - Returns - If a `select` function is provided, the return value of the `select` function. - If no `select` function is provided, the `TAllParams` object or a loosened version of the `TAllParams` object if `opts.strict` is `false`. @@ -104,7 +104,7 @@ The `RouteApi` has the following properties and methods: }): TSelected ``` -- A type-safe version of the [`useLoaderData`](../useLoaderDataHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with. +- A type-safe version of the [`useLoaderData`](./useLoaderDataHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with. - Options - `opts.select` - Optional @@ -114,7 +114,7 @@ The `RouteApi` has the following properties and methods: - Optional - `boolean` - Configures whether structural sharing is enabled for the value returned by `select`. - - See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. + - See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. - Returns - If a `select` function is provided, the return value of the `select` function. - If no `select` function is provided, the `TLoaderData` object or a loosened version of the `TLoaderData` object if `opts.strict` is `false`. @@ -127,7 +127,7 @@ The `RouteApi` has the following properties and methods: }): TSelected ``` -- A type-safe version of the [`useLoaderDeps`](../useLoaderDepsHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with. +- A type-safe version of the [`useLoaderDeps`](./useLoaderDepsHook.md) hook that is pre-bound to the route ID that the `RouteApi` instance was created with. - Options - `opts.select` - Optional @@ -137,7 +137,7 @@ The `RouteApi` has the following properties and methods: - Optional - `boolean` - Configures whether structural sharing is enabled for the value returned by `select`. - - See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. + - See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. - Returns - If a `select` function is provided, the return value of the `select` function. - If no `select` function is provided, the `TLoaderDeps` object. @@ -148,4 +148,4 @@ The `RouteApi` has the following properties and methods: useNavigate(): // navigate function ``` -- A type-safe version of [`useNavigate`](../useNavigateHook.md) that is pre-bound to the route ID that the `RouteApi` instance was created with. +- A type-safe version of [`useNavigate`](./useNavigateHook.md) that is pre-bound to the route ID that the `RouteApi` instance was created with. diff --git a/docs/router/framework/react/api/router/RouteClass.md b/docs/router/framework/react/api/router/RouteClass.md index 7658092ca4c..514a58cd418 100644 --- a/docs/router/framework/react/api/router/RouteClass.md +++ b/docs/router/framework/react/api/router/RouteClass.md @@ -5,7 +5,7 @@ title: Route class > [!CAUTION] > This class has been deprecated and will be removed in the next major version of TanStack Router. -> Please use the [`createRoute`](../createRouteFunction.md) function instead. +> Please use the [`createRoute`](./createRouteFunction.md) function instead. The `Route` class implements the `RouteApi` class and can be used to create route instances. A route instance can then be used to create a route tree. @@ -15,13 +15,13 @@ The `Route` constructor accepts an object as its only argument. ### Constructor options -- Type: [`RouteOptions`](../RouteOptionsType.md) +- Type: [`RouteOptions`](./RouteOptionsType.md) - Required - The options that will be used to configure the route instance ### Constructor returns -A new [`Route`](../RouteType.md) instance. +A new [`Route`](./RouteType.md) instance. ## Examples diff --git a/docs/router/framework/react/api/router/RouteMaskType.md b/docs/router/framework/react/api/router/RouteMaskType.md index 9ce6e42e36c..d3e22c0c0d8 100644 --- a/docs/router/framework/react/api/router/RouteMaskType.md +++ b/docs/router/framework/react/api/router/RouteMaskType.md @@ -3,7 +3,7 @@ id: RouteMaskType title: RouteMask type --- -The `RouteMask` type extends the [`ToOptions`](../ToOptionsType.md) type and has other the necessary properties to create a route mask. +The `RouteMask` type extends the [`ToOptions`](./ToOptionsType.md) type and has other the necessary properties to create a route mask. ## RouteMask properties @@ -11,7 +11,7 @@ The `RouteMask` type accepts an object with the following properties: ### `...ToOptions` -- Type: [`ToOptions`](../ToOptionsType.md) +- Type: [`ToOptions`](./ToOptionsType.md) - Required - The options that will be used to configure the route mask diff --git a/docs/router/framework/react/api/router/RouteOptionsType.md b/docs/router/framework/react/api/router/RouteOptionsType.md index a489fe24233..215e21c9ef4 100644 --- a/docs/router/framework/react/api/router/RouteOptionsType.md +++ b/docs/router/framework/react/api/router/RouteOptionsType.md @@ -109,13 +109,13 @@ type beforeLoad = ( ``` - Optional -- [`ParsedLocation`](../ParsedLocationType.md) +- [`ParsedLocation`](./ParsedLocationType.md) - This async function is called before a route is loaded. If an error is thrown here, the route's loader will not be called and the route will not render. If thrown during a navigation, the navigation will be canceled and the error will be passed to the `onError` function. If thrown during a preload event, the error will be logged to the console and the preload will fail. - If this function returns a promise, the route will be put into a pending state and cause rendering to suspend until the promise resolves. If this route's pendingMs threshold is reached, the `pendingComponent` will be shown until it resolves. If the promise rejects, the route will be put into an error state and the error will be thrown during render. - If this function returns a `TRouteContext` object, that object will be merged into the route's context and be made available in the `loader` and other related route components/methods. - It's common to use this function to check if a user is authenticated and redirect them to a login page if they are not. To do this, you can either return or throw a `redirect` object from this function. -> 🚧 `opts.navigate` has been deprecated and will be removed in the next major release. Use `throw redirect({ to: '/somewhere' })` instead. Read more about the `redirect` function [here](../redirectFunction.md). +> 🚧 `opts.navigate` has been deprecated and will be removed in the next major release. Use `throw redirect({ to: '/somewhere' })` instead. Read more about the `redirect` function [here](./redirectFunction.md). ### `loader` method @@ -139,13 +139,13 @@ type loader = ( ``` - Optional -- [`ParsedLocation`](../ParsedLocationType.md) +- [`ParsedLocation`](./ParsedLocationType.md) - This async function is called when a route is matched and passed the route's match object. If an error is thrown here, the route will be put into an error state and the error will be thrown during render. If thrown during a navigation, the navigation will be canceled and the error will be passed to the `onError` function. If thrown during a preload event, the error will be logged to the console and the preload will fail. - If this function returns a promise, the route will be put into a pending state and cause rendering to suspend until the promise resolves. If this route's pendingMs threshold is reached, the `pendingComponent` will be shown until it resolves. If the promise rejects, the route will be put into an error state and the error will be thrown during render. - If this function returns a `TLoaderData` object, that object will be stored on the route match until the route match is no longer active. It can be accessed using the `useLoaderData` hook in any component that is a child of the route match before another `` is rendered. - Deps must be returned by your `loaderDeps` function in order to appear. -> 🚧 `opts.navigate` has been deprecated and will be removed in the next major release. Use `throw redirect({ to: '/somewhere' })` instead. Read more about the `redirect` function [here](../redirectFunction.md). +> 🚧 `opts.navigate` has been deprecated and will be removed in the next major release. Use `throw redirect({ to: '/somewhere' })` instead. Read more about the `redirect` function [here](./redirectFunction.md). ### `loaderDeps` method @@ -243,7 +243,7 @@ type loaderDeps = (opts: { search: TFullSearchSchema }) => Record - Type: `(error: any) => void` - Optional - A function that will be called when an error is thrown during a navigation or preload event. -- If this function throws a [`redirect`](../redirectFunction.md), then the router will process and apply the redirect immediately. +- If this function throws a [`redirect`](./redirectFunction.md), then the router will process and apply the redirect immediately. ### `onEnter` property diff --git a/docs/router/framework/react/api/router/RouteType.md b/docs/router/framework/react/api/router/RouteType.md index 6e2c675c9ab..57e23ecc8bc 100644 --- a/docs/router/framework/react/api/router/RouteType.md +++ b/docs/router/framework/react/api/router/RouteType.md @@ -28,4 +28,4 @@ An instance of the `Route` has the following properties and methods: ### ...`RouteApi` methods -- All of the methods from [`RouteApi`](../RouteApiType.md) are available. +- All of the methods from [`RouteApi`](./RouteApiType.md) are available. diff --git a/docs/router/framework/react/api/router/RouterClass.md b/docs/router/framework/react/api/router/RouterClass.md index 24fa525afcf..dfb4589b77e 100644 --- a/docs/router/framework/react/api/router/RouterClass.md +++ b/docs/router/framework/react/api/router/RouterClass.md @@ -5,7 +5,7 @@ title: Router Class > [!CAUTION] > This class has been deprecated and will be removed in the next major version of TanStack Router. -> Please use the [`createRouter`](../createRouterFunction.md) function instead. +> Please use the [`createRouter`](./createRouterFunction.md) function instead. The `Router` class is used to instantiate a new router instance. @@ -15,13 +15,13 @@ The `Router` constructor accepts a single argument: the `options` that will be u ### Constructor options -- Type: [`RouterOptions`](../RouterOptionsType.md) +- Type: [`RouterOptions`](./RouterOptionsType.md) - Required - The options that will be used to configure the router instance. ### Constructor returns -- An instance of the [`Router`](../RouterType.md). +- An instance of the [`Router`](./RouterType.md). ## Examples diff --git a/docs/router/framework/react/api/router/RouterEventsType.md b/docs/router/framework/react/api/router/RouterEventsType.md index 0d31f05ce38..fd1b6dfb3d2 100644 --- a/docs/router/framework/react/api/router/RouterEventsType.md +++ b/docs/router/framework/react/api/router/RouterEventsType.md @@ -66,12 +66,12 @@ Once an event is emitted, the following properties will be present on the event ### `fromLocation` property -- Type: [`ParsedLocation`](../ParsedLocationType.md) +- Type: [`ParsedLocation`](./ParsedLocationType.md) - The location that the router is transitioning from. ### `toLocation` property -- Type: [`ParsedLocation`](../ParsedLocationType.md) +- Type: [`ParsedLocation`](./ParsedLocationType.md) - The location that the router is transitioning to. ### `pathChanged` property diff --git a/docs/router/framework/react/api/router/RouterOptionsType.md b/docs/router/framework/react/api/router/RouterOptionsType.md index f3a15369d58..e8ed9af7bd0 100644 --- a/docs/router/framework/react/api/router/RouterOptionsType.md +++ b/docs/router/framework/react/api/router/RouterOptionsType.md @@ -149,7 +149,7 @@ The `RouterOptions` type accepts an object with the following properties and met - Type: `boolean | ViewTransitionOptions` - Optional - If `true`, route navigations will be called using `document.startViewTransition()`. -- If [`ViewTransitionOptions`](../ViewTransitionOptionsType.md), route navigations will be called using `document.startViewTransition({update, types})` +- If [`ViewTransitionOptions`](./ViewTransitionOptionsType.md), route navigations will be called using `document.startViewTransition({update, types})` where `types` will be the strings array passed with `ViewTransitionOptions["types"]`. If the browser does not support viewTransition types, the navigation will fall back to normal `document.startTransition()`, same as if `true` was passed. - If the browser does not support this api, this option will be ignored. @@ -182,7 +182,7 @@ The `RouterOptions` type accepts an object with the following properties and met ### `context` property - Type: `any` -- Optional or required if the root route was created with [`createRootRouteWithContext()`](../createRootRouteWithContextFunction.md). +- Optional or required if the root route was created with [`createRootRouteWithContext()`](./createRootRouteWithContextFunction.md). - The root context that will be provided to all routes in the route tree. This can be used to provide a context to all routes in the tree without having to provide it to each route individually. ### `dehydrate` method @@ -259,7 +259,7 @@ const router = createRouter({ - Type: `'root' | 'fuzzy'` - Optional - Defaults to `'fuzzy'` -- This property controls how TanStack Router will handle scenarios where it cannot find a route to match the current location. See the [Not Found Errors guide](../../../guide/not-found-errors.md) for more information. +- This property controls how TanStack Router will handle scenarios where it cannot find a route to match the current location. See the [Not Found Errors guide](../../guide/not-found-errors.md) for more information. ### `notFoundRoute` property @@ -287,7 +287,7 @@ const router = createRouter({ - Optional - Defaults to `false` - Configures whether structural sharing is enabled by default for fine-grained selectors. -- See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. +- See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. ### `defaultRemountDeps` property diff --git a/docs/router/framework/react/api/router/RouterStateType.md b/docs/router/framework/react/api/router/RouterStateType.md index 401ffdfef44..6c4d2aca934 100644 --- a/docs/router/framework/react/api/router/RouterStateType.md +++ b/docs/router/framework/react/api/router/RouterStateType.md @@ -38,20 +38,20 @@ The `RouterState` type contains all of the properties that are available on the ### `matches` property -- Type: [`Array`](../RouteMatchType.md) +- Type: [`Array`](./RouteMatchType.md) - An array of all of the route matches that have been resolved and are currently active. ### `pendingMatches` property -- Type: [`Array`](../RouteMatchType.md) +- Type: [`Array`](./RouteMatchType.md) - An array of all of the route matches that are currently pending. ### `location` property -- Type: [`ParsedLocation`](../ParsedLocationType.md) +- Type: [`ParsedLocation`](./ParsedLocationType.md) - The latest location that the router has parsed from the browser history. This location may not be resolved and loaded yet. ### `resolvedLocation` property -- Type: [`ParsedLocation`](../ParsedLocationType.md) +- Type: [`ParsedLocation`](./ParsedLocationType.md) - The location that the router has resolved and loaded. diff --git a/docs/router/framework/react/api/router/RouterType.md b/docs/router/framework/react/api/router/RouterType.md index cd76faa95d6..c5736638a0b 100644 --- a/docs/router/framework/react/api/router/RouterType.md +++ b/docs/router/framework/react/api/router/RouterType.md @@ -16,15 +16,15 @@ An instance of the `Router` has the following properties and methods: ### `state` property -- Type: [`RouterState`](../RouterStateType.md) +- Type: [`RouterState`](./RouterStateType.md) - The current state of the router. -> ⚠️⚠️⚠️ **`router.state` is always up to date, but NOT REACTIVE. If you use `router.state` in a component, the component will not re-render when the router state changes. To get a reactive version of the router state, use the [`useRouterState`](../useRouterStateHook.md) hook.** +> ⚠️⚠️⚠️ **`router.state` is always up to date, but NOT REACTIVE. If you use `router.state` in a component, the component will not re-render when the router state changes. To get a reactive version of the router state, use the [`useRouterState`](./useRouterStateHook.md) hook.** ### `.subscribe` method - Type: `(eventType: TType, fn: ListenerFn) => (event: RouterEvent) => void` -- Subscribes to a [`RouterEvent`](../RouterEventsType.md). +- Subscribes to a [`RouterEvent`](./RouterEventsType.md). - Returns a function that can be used to unsubscribe from the event. - The callback provided to the returned function will be called with the event that was emitted. @@ -100,7 +100,7 @@ Commits a new location object to the browser history. ``` - Properties - `location` - - Type: [`ParsedLocation`](../ParsedLocationType.md) + - Type: [`ParsedLocation`](./ParsedLocationType.md) - Required - The location to commit to the browser history. - `replace` diff --git a/docs/router/framework/react/api/router/ToMaskOptionsType.md b/docs/router/framework/react/api/router/ToMaskOptionsType.md index 3c725af5407..fa0140fec26 100644 --- a/docs/router/framework/react/api/router/ToMaskOptionsType.md +++ b/docs/router/framework/react/api/router/ToMaskOptionsType.md @@ -3,7 +3,7 @@ id: ToMaskOptionsType title: ToMaskOptions type --- -The `ToMaskOptions` type extends the [`ToOptions`](../ToOptionsType.md) type and describes additional options available when using route masks. +The `ToMaskOptions` type extends the [`ToOptions`](./ToOptionsType.md) type and describes additional options available when using route masks. ```tsx type ToMaskOptions = ToOptions & { @@ -11,4 +11,4 @@ type ToMaskOptions = ToOptions & { } ``` -- [`ToOptions`](../ToOptionsType.md) +- [`ToOptions`](./ToOptionsType.md) diff --git a/docs/router/framework/react/api/router/UseMatchRouteOptionsType.md b/docs/router/framework/react/api/router/UseMatchRouteOptionsType.md index a7e622a3191..885b7d26d30 100644 --- a/docs/router/framework/react/api/router/UseMatchRouteOptionsType.md +++ b/docs/router/framework/react/api/router/UseMatchRouteOptionsType.md @@ -3,11 +3,11 @@ id: UseMatchRouteOptionsType title: UseMatchRouteOptions type --- -The `UseMatchRouteOptions` type extends the [`ToOptions`](../ToOptionsType.md) type and describes additional options available when using the [`useMatchRoute`](../useMatchRouteHook.md) hook. +The `UseMatchRouteOptions` type extends the [`ToOptions`](./ToOptionsType.md) type and describes additional options available when using the [`useMatchRoute`](./useMatchRouteHook.md) hook. ```tsx export type UseMatchRouteOptions = ToOptions & MatchRouteOptions ``` -- [`ToOptions`](../ToOptionsType.md) -- [`MatchRouteOptions`](../MatchRouteOptionsType.md) +- [`ToOptions`](./ToOptionsType.md) +- [`MatchRouteOptions`](./MatchRouteOptionsType.md) diff --git a/docs/router/framework/react/api/router/catchBoundaryComponent.md b/docs/router/framework/react/api/router/catchBoundaryComponent.md index ac3871cb211..deef0ffa22b 100644 --- a/docs/router/framework/react/api/router/catchBoundaryComponent.md +++ b/docs/router/framework/react/api/router/catchBoundaryComponent.md @@ -24,7 +24,7 @@ The `CatchBoundary` component accepts the following props: ### `props.errorComponent` prop - Type: `React.ReactNode` -- Optional - [`default: ErrorComponent`](../errorComponentComponent.md) +- Optional - [`default: ErrorComponent`](./errorComponentComponent.md) - The component to render when there is an error. ### `props.onCatch` prop diff --git a/docs/router/framework/react/api/router/createFileRouteFunction.md b/docs/router/framework/react/api/router/createFileRouteFunction.md index e6330da51e6..945e7130757 100644 --- a/docs/router/framework/react/api/router/createFileRouteFunction.md +++ b/docs/router/framework/react/api/router/createFileRouteFunction.md @@ -17,7 +17,7 @@ The `createFileRoute` function accepts a single argument of type `string` that r ## createFileRoute returns -A new function that accepts a single argument of type [`RouteOptions`](../RouteOptionsType.md) that will be used to configure the file [`Route`](../RouteType.md) instance. +A new function that accepts a single argument of type [`RouteOptions`](./RouteOptionsType.md) that will be used to configure the file [`Route`](./RouteType.md) instance. > ⚠️ Note: For `tsr generate` and `tsr watch` to work properly, the file route instance must be exported from the file using the `Route` identifier. diff --git a/docs/router/framework/react/api/router/createLazyFileRouteFunction.md b/docs/router/framework/react/api/router/createLazyFileRouteFunction.md index 5d00fb74586..87e1743ed17 100644 --- a/docs/router/framework/react/api/router/createLazyFileRouteFunction.md +++ b/docs/router/framework/react/api/router/createLazyFileRouteFunction.md @@ -3,7 +3,7 @@ id: createLazyFileRouteFunction title: createLazyFileRoute function --- -The `createLazyFileRoute` function is used for creating a partial file-based route route instance that is lazily loaded when matched. This route instance can only be used to configure the [non-critical properties](../../../guide/code-splitting.md#how-does-tanstack-router-split-code) of the route, such as `component`, `pendingComponent`, `errorComponent`, and the `notFoundComponent`. +The `createLazyFileRoute` function is used for creating a partial file-based route route instance that is lazily loaded when matched. This route instance can only be used to configure the [non-critical properties](../../guide/code-splitting.md#how-does-tanstack-router-split-code) of the route, such as `component`, `pendingComponent`, `errorComponent`, and the `notFoundComponent`. ## createLazyFileRoute options @@ -17,7 +17,7 @@ The `createLazyFileRoute` function accepts a single argument of type `string` th ### createLazyFileRoute returns -A new function that accepts a single argument of partial of the type [`RouteOptions`](../RouteOptionsType.md) that will be used to configure the file [`Route`](../RouteType.md) instance. +A new function that accepts a single argument of partial of the type [`RouteOptions`](./RouteOptionsType.md) that will be used to configure the file [`Route`](./RouteType.md) instance. - Type: @@ -28,7 +28,7 @@ Pick< > ``` -- [`RouteOptions`](../RouteOptionsType.md) +- [`RouteOptions`](./RouteOptionsType.md) > ⚠️ Note: For `tsr generate` and `tsr watch` to work properly, the file route instance must be exported from the file using the `Route` identifier. diff --git a/docs/router/framework/react/api/router/createLazyRouteFunction.md b/docs/router/framework/react/api/router/createLazyRouteFunction.md index 57e9fcdc717..48c100c352c 100644 --- a/docs/router/framework/react/api/router/createLazyRouteFunction.md +++ b/docs/router/framework/react/api/router/createLazyRouteFunction.md @@ -3,7 +3,7 @@ id: createLazyRouteFunction title: createLazyRoute function --- -The `createLazyRoute` function is used for creating a partial code-based route route instance that is lazily loaded when matched. This route instance can only be used to configure the [non-critical properties](../../../guide/code-splitting.md#how-does-tanstack-router-split-code) of the route, such as `component`, `pendingComponent`, `errorComponent`, and the `notFoundComponent`. +The `createLazyRoute` function is used for creating a partial code-based route route instance that is lazily loaded when matched. This route instance can only be used to configure the [non-critical properties](../../guide/code-splitting.md#how-does-tanstack-router-split-code) of the route, such as `component`, `pendingComponent`, `errorComponent`, and the `notFoundComponent`. ## createLazyRoute options @@ -17,7 +17,7 @@ The `createLazyRoute` function accepts a single argument of type `string` that r ### createLazyRoute returns -A new function that accepts a single argument of partial of the type [`RouteOptions`](../RouteOptionsType.md) that will be used to configure the file [`Route`](../RouteType.md) instance. +A new function that accepts a single argument of partial of the type [`RouteOptions`](./RouteOptionsType.md) that will be used to configure the file [`Route`](./RouteType.md) instance. - Type: @@ -28,7 +28,7 @@ Pick< > ``` -- [`RouteOptions`](../RouteOptionsType.md) +- [`RouteOptions`](./RouteOptionsType.md) > ⚠️ Note: This route instance must be manually lazily loaded against its critical route instance using the `lazy` method returned by the `createRoute` function. diff --git a/docs/router/framework/react/api/router/createRootRouteFunction.md b/docs/router/framework/react/api/router/createRootRouteFunction.md index 6494924a70e..27cff720321 100644 --- a/docs/router/framework/react/api/router/createRootRouteFunction.md +++ b/docs/router/framework/react/api/router/createRootRouteFunction.md @@ -23,12 +23,12 @@ Omit< > ``` -- [`RouteOptions`](../RouteOptionsType.md) +- [`RouteOptions`](./RouteOptionsType.md) - Optional ## createRootRoute returns -A new [`Route`](../RouteType.md) instance. +A new [`Route`](./RouteType.md) instance. ## Examples diff --git a/docs/router/framework/react/api/router/createRootRouteWithContextFunction.md b/docs/router/framework/react/api/router/createRootRouteWithContextFunction.md index 38d5c394966..7e157375394 100644 --- a/docs/router/framework/react/api/router/createRootRouteWithContextFunction.md +++ b/docs/router/framework/react/api/router/createRootRouteWithContextFunction.md @@ -17,8 +17,8 @@ The `createRootRouteWithContext` function accepts a single generic argument: ## createRootRouteWithContext returns -- A factory function that can be used to create a new [`createRootRoute`](../createRootRouteFunction.md) instance. -- It accepts a single argument, the same as the [`createRootRoute`](../createRootRouteFunction.md) function. +- A factory function that can be used to create a new [`createRootRoute`](./createRootRouteFunction.md) instance. +- It accepts a single argument, the same as the [`createRootRoute`](./createRootRouteFunction.md) function. ## Examples diff --git a/docs/router/framework/react/api/router/createRouteFunction.md b/docs/router/framework/react/api/router/createRouteFunction.md index 7294e6abc75..2ca9bdcb2d8 100644 --- a/docs/router/framework/react/api/router/createRouteFunction.md +++ b/docs/router/framework/react/api/router/createRouteFunction.md @@ -3,17 +3,17 @@ id: createRouteFunction title: createRoute function --- -The `createRoute` function implements returns a [`Route`](../RouteType.md) instance. A route instance can then be passed to a root route's children to create a route tree, which is then passed to the router. +The `createRoute` function implements returns a [`Route`](./RouteType.md) instance. A route instance can then be passed to a root route's children to create a route tree, which is then passed to the router. ## createRoute options -- Type: [`RouteOptions`](../RouteOptionsType.md) +- Type: [`RouteOptions`](./RouteOptionsType.md) - Required - The options that will be used to configure the route instance ## createRoute returns -A new [`Route`](../RouteType.md) instance. +A new [`Route`](./RouteType.md) instance. ## Examples diff --git a/docs/router/framework/react/api/router/createRouteMaskFunction.md b/docs/router/framework/react/api/router/createRouteMaskFunction.md index 45210ff31d4..64722c57b30 100644 --- a/docs/router/framework/react/api/router/createRouteMaskFunction.md +++ b/docs/router/framework/react/api/router/createRouteMaskFunction.md @@ -7,13 +7,13 @@ The `createRouteMask` function is a helper function that can be used to create a ## createRouteMask options -- Type: [`RouteMask`](../RouteMaskType.md) +- Type: [`RouteMask`](./RouteMaskType.md) - Required - The options that will be used to configure the route mask ## createRouteMask returns -- A object with the type signature of [`RouteMask`](../RouteMaskType.md) that can be passed to the `RouterOptions.routeMasks` option. +- A object with the type signature of [`RouteMask`](./RouteMaskType.md) that can be passed to the `RouterOptions.routeMasks` option. ## Examples diff --git a/docs/router/framework/react/api/router/createRouterFunction.md b/docs/router/framework/react/api/router/createRouterFunction.md index d82df5e5a7f..7fe5779f7d4 100644 --- a/docs/router/framework/react/api/router/createRouterFunction.md +++ b/docs/router/framework/react/api/router/createRouterFunction.md @@ -3,17 +3,17 @@ id: createRouterFunction title: createRouter function --- -The `createRouter` function accepts a [`RouterOptions`](../RouterOptionsType.md) object and creates a new [`Router`](../RouterClass.md) instance. +The `createRouter` function accepts a [`RouterOptions`](./RouterOptionsType.md) object and creates a new [`Router`](./RouterClass.md) instance. ## createRouter options -- Type: [`RouterOptions`](../RouterOptionsType.md) +- Type: [`RouterOptions`](./RouterOptionsType.md) - Required - The options that will be used to configure the router instance. ## createRouter returns -- An instance of the [`Router`](../RouterType.md). +- An instance of the [`Router`](./RouterType.md). ## Examples diff --git a/docs/router/framework/react/api/router/deferFunction.md b/docs/router/framework/react/api/router/deferFunction.md index 7c1c1130c1b..929b9d7c631 100644 --- a/docs/router/framework/react/api/router/deferFunction.md +++ b/docs/router/framework/react/api/router/deferFunction.md @@ -6,7 +6,7 @@ title: defer function > [!CAUTION] > You don't need to call `defer` manually anymore, Promises are handled automatically now. -The `defer` function wraps a promise with a deferred state object that can be used to inspect the promise's state. This deferred promise can then be passed to the [`useAwaited`](../useAwaitedHook.md) hook or the [``](../awaitComponent.md) component for suspending until the promise is resolved or rejected. +The `defer` function wraps a promise with a deferred state object that can be used to inspect the promise's state. This deferred promise can then be passed to the [`useAwaited`](./useAwaitedHook.md) hook or the [``](./awaitComponent.md) component for suspending until the promise is resolved or rejected. The `defer` function accepts a single argument, the `promise` to wrap with a deferred state object. @@ -18,7 +18,7 @@ The `defer` function accepts a single argument, the `promise` to wrap with a def ## defer returns -- A promise that can be passed to the [`useAwaited`](../useAwaitedHook.md) hook or the [``](../awaitComponent.md) component. +- A promise that can be passed to the [`useAwaited`](./useAwaitedHook.md) hook or the [``](./awaitComponent.md) component. ## Examples diff --git a/docs/router/framework/react/api/router/getRouteApiFunction.md b/docs/router/framework/react/api/router/getRouteApiFunction.md index 6aa13b74a91..cd78075a3ae 100644 --- a/docs/router/framework/react/api/router/getRouteApiFunction.md +++ b/docs/router/framework/react/api/router/getRouteApiFunction.md @@ -13,11 +13,11 @@ The `getRouteApi` function accepts a single argument, a `routeId` string literal - Type: `string` - Required -- The route ID to which the [`RouteApi`](../RouteApiClass.md) instance will be bound +- The route ID to which the [`RouteApi`](./RouteApiClass.md) instance will be bound ## getRouteApi returns -- An instance of the [`RouteApi`](../RouteApiType.md) that is pre-bound to the route ID that the `getRouteApi` function was called with. +- An instance of the [`RouteApi`](./RouteApiType.md) that is pre-bound to the route ID that the `getRouteApi` function was called with. ## Examples diff --git a/docs/router/framework/react/api/router/isNotFoundFunction.md b/docs/router/framework/react/api/router/isNotFoundFunction.md index 8ace56b3533..17411b7bbe2 100644 --- a/docs/router/framework/react/api/router/isNotFoundFunction.md +++ b/docs/router/framework/react/api/router/isNotFoundFunction.md @@ -3,7 +3,7 @@ id: isNotFoundFunction title: isNotFound function --- -The `isNotFound` function can be used to determine if an object is a [`NotFoundError`](../NotFoundErrorType.md) object. +The `isNotFound` function can be used to determine if an object is a [`NotFoundError`](./NotFoundErrorType.md) object. ## isNotFound options @@ -13,13 +13,13 @@ The `isNotFound` function accepts a single argument, an `input`. - Type: `unknown` - Required -- An object to check if it is a [`NotFoundError`](../NotFoundErrorType.md). +- An object to check if it is a [`NotFoundError`](./NotFoundErrorType.md). ## isNotFound returns - Type: `boolean` -- `true` if the object is a [`NotFoundError`](../NotFoundErrorType.md). -- `false` if the object is not a [`NotFoundError`](../NotFoundErrorType.md). +- `true` if the object is a [`NotFoundError`](./NotFoundErrorType.md). +- `false` if the object is not a [`NotFoundError`](./NotFoundErrorType.md). ## Examples diff --git a/docs/router/framework/react/api/router/linkComponent.md b/docs/router/framework/react/api/router/linkComponent.md index dd990f14255..6c973d80df2 100644 --- a/docs/router/framework/react/api/router/linkComponent.md +++ b/docs/router/framework/react/api/router/linkComponent.md @@ -12,7 +12,7 @@ The `Link` component accepts the following props: ### `...props` - Type: `LinkProps & React.RefAttributes` -- [`LinkProps`](../LinkPropsType.md) +- [`LinkProps`](./LinkPropsType.md) ## Link returns diff --git a/docs/router/framework/react/api/router/linkOptions.md b/docs/router/framework/react/api/router/linkOptions.md index 7226afaf8aa..2c828500be4 100644 --- a/docs/router/framework/react/api/router/linkOptions.md +++ b/docs/router/framework/react/api/router/linkOptions.md @@ -12,7 +12,7 @@ The `linkOptions` accepts the following option: ### `...props` - Type: `LinkProps & React.RefAttributes` -- [`LinkProps`](../LinkPropsType.md) +- [`LinkProps`](./LinkPropsType.md) ## `linkOptions` returns diff --git a/docs/router/framework/react/api/router/matchRouteComponent.md b/docs/router/framework/react/api/router/matchRouteComponent.md index be23a0b18e9..2deba6762ee 100644 --- a/docs/router/framework/react/api/router/matchRouteComponent.md +++ b/docs/router/framework/react/api/router/matchRouteComponent.md @@ -11,7 +11,7 @@ The `MatchRoute` component accepts the same options as the `useMatchRoute` hook ### `...props` prop -- Type: [`UseMatchRouteOptions`](../UseMatchRouteOptionsType.md) +- Type: [`UseMatchRouteOptions`](./UseMatchRouteOptionsType.md) ### `children` prop diff --git a/docs/router/framework/react/api/router/navigateComponent.md b/docs/router/framework/react/api/router/navigateComponent.md index c66e9dd6ac9..a4431eaf87e 100644 --- a/docs/router/framework/react/api/router/navigateComponent.md +++ b/docs/router/framework/react/api/router/navigateComponent.md @@ -11,7 +11,7 @@ The `Navigate` component accepts the following props: ### `...options` -- Type: [`NavigateOptions`](../NavigateOptionsType.md) +- Type: [`NavigateOptions`](./NavigateOptionsType.md) ## Navigate returns diff --git a/docs/router/framework/react/api/router/notFoundFunction.md b/docs/router/framework/react/api/router/notFoundFunction.md index 53848b4af81..02bb26bfbc0 100644 --- a/docs/router/framework/react/api/router/notFoundFunction.md +++ b/docs/router/framework/react/api/router/notFoundFunction.md @@ -9,7 +9,7 @@ The `notFound` function returns a new `NotFoundError` object that can be either The `notFound` function accepts a single optional argument, the `options` to create the not-found error object. -- Type: [`Partial`](../NotFoundErrorType.md) +- Type: [`Partial`](./NotFoundErrorType.md) - Optional ## notFound returns diff --git a/docs/router/framework/react/api/router/redirectFunction.md b/docs/router/framework/react/api/router/redirectFunction.md index 7fe7afff2e2..5c680a3f0d6 100644 --- a/docs/router/framework/react/api/router/redirectFunction.md +++ b/docs/router/framework/react/api/router/redirectFunction.md @@ -9,7 +9,7 @@ The `redirect` function returns a new `Redirect` object that can be either retur The `redirect` function accepts a single argument, the `options` to determine the redirect behavior. -- Type: [`Redirect`](../RedirectType.md) +- Type: [`Redirect`](./RedirectType.md) - Required ## redirect returns diff --git a/docs/router/framework/react/api/router/rootRouteWithContextFunction.md b/docs/router/framework/react/api/router/rootRouteWithContextFunction.md index d2db4f37125..30cf6d69a6f 100644 --- a/docs/router/framework/react/api/router/rootRouteWithContextFunction.md +++ b/docs/router/framework/react/api/router/rootRouteWithContextFunction.md @@ -5,7 +5,7 @@ title: rootRouteWithContext function > [!CAUTION] > This function is deprecated and will be removed in the next major version of TanStack Router. -> Please use the [`createRootRouteWithContext`](../createRootRouteWithContextFunction.md) function instead. +> Please use the [`createRootRouteWithContext`](./createRootRouteWithContextFunction.md) function instead. The `rootRouteWithContext` function is a helper function that can be used to create a root route instance that requires a context type to be fulfilled when the router is created. @@ -21,8 +21,8 @@ The `rootRouteWithContext` function accepts a single generic argument: ## rootRouteWithContext returns -- A factory function that can be used to create a new [`createRootRoute`](../createRootRouteFunction.md) instance. -- It accepts a single argument, the same as the [`createRootRoute`](../createRootRouteFunction.md) function. +- A factory function that can be used to create a new [`createRootRoute`](./createRootRouteFunction.md) instance. +- It accepts a single argument, the same as the [`createRootRoute`](./createRootRouteFunction.md) function. ## Examples diff --git a/docs/router/framework/react/api/router/useBlockerHook.md b/docs/router/framework/react/api/router/useBlockerHook.md index 218efc6b4a2..98d4a06c3b2 100644 --- a/docs/router/framework/react/api/router/useBlockerHook.md +++ b/docs/router/framework/react/api/router/useBlockerHook.md @@ -3,7 +3,7 @@ id: useBlockerHook title: useBlocker hook --- -The `useBlocker` method is a hook that [blocks navigation](../../../guide/navigation-blocking.md) when a condition is met. +The `useBlocker` method is a hook that [blocks navigation](../../guide/navigation-blocking.md) when a condition is met. > ⚠️ The following new `useBlocker` API is currently _experimental_. diff --git a/docs/router/framework/react/api/router/useCanGoBack.md b/docs/router/framework/react/api/router/useCanGoBack.md index cfae5380554..39b84fbdf9b 100644 --- a/docs/router/framework/react/api/router/useCanGoBack.md +++ b/docs/router/framework/react/api/router/useCanGoBack.md @@ -14,7 +14,7 @@ The `useCanGoBack` hook returns a boolean representing if the router history can ## Limitations -The router history index is reset after a navigation with [`reloadDocument`](../NavigateOptionsType.md#reloaddocument) set as `true`. This causes the router history to consider the new location as the initial one and will cause `useCanGoBack` to return `false`. +The router history index is reset after a navigation with [`reloadDocument`](./NavigateOptionsType.md#reloaddocument) set as `true`. This causes the router history to consider the new location as the initial one and will cause `useCanGoBack` to return `false`. ## Examples diff --git a/docs/router/framework/react/api/router/useChildMatchesHook.md b/docs/router/framework/react/api/router/useChildMatchesHook.md index ae4480d8223..cf31d210160 100644 --- a/docs/router/framework/react/api/router/useChildMatchesHook.md +++ b/docs/router/framework/react/api/router/useChildMatchesHook.md @@ -3,7 +3,7 @@ id: useChildMatchesHook title: useChildMatches hook --- -The `useChildMatches` hook returns all of the child [`RouteMatch`](../RouteMatchType.md) objects from the closest match down to the leaf-most match. **It does not include the current match, which can be obtained using the `useMatch` hook.** +The `useChildMatches` hook returns all of the child [`RouteMatch`](./RouteMatchType.md) objects from the closest match down to the leaf-most match. **It does not include the current match, which can be obtained using the `useMatch` hook.** > [!IMPORTANT] > If the router has pending matches and they are showing their pending component fallbacks, `router.state.pendingMatches` will used instead of `router.state.matches`. @@ -23,12 +23,12 @@ The `useChildMatches` hook accepts a single _optional_ argument, an `options` ob - Type: `boolean` - Optional - Configures whether structural sharing is enabled for the value returned by `select`. -- See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. +- See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. ## useChildMatches returns - If a `select` function is provided, the return value of the `select` function. -- If no `select` function is provided, an array of [`RouteMatch`](../RouteMatchType.md) objects. +- If no `select` function is provided, an array of [`RouteMatch`](./RouteMatchType.md) objects. ## Examples diff --git a/docs/router/framework/react/api/router/useLinkPropsHook.md b/docs/router/framework/react/api/router/useLinkPropsHook.md index d3f70ba0c7c..3c29881ba11 100644 --- a/docs/router/framework/react/api/router/useLinkPropsHook.md +++ b/docs/router/framework/react/api/router/useLinkPropsHook.md @@ -12,9 +12,9 @@ type UseLinkPropsOptions = ActiveLinkOptions & React.AnchorHTMLAttributes ``` -- [`ActiveLinkOptions`](../ActiveLinkOptionsType.md) -- The `useLinkProps` options are used to build a [`LinkProps`](../LinkPropsType.md) object. -- It also extends the `React.AnchorHTMLAttributes` type, so that any additional props that are passed to the `useLinkProps` hook will be merged with the [`LinkProps`](../LinkPropsType.md) object. +- [`ActiveLinkOptions`](./ActiveLinkOptionsType.md) +- The `useLinkProps` options are used to build a [`LinkProps`](./LinkPropsType.md) object. +- It also extends the `React.AnchorHTMLAttributes` type, so that any additional props that are passed to the `useLinkProps` hook will be merged with the [`LinkProps`](./LinkPropsType.md) object. ## useLinkProps returns diff --git a/docs/router/framework/react/api/router/useLoaderDataHook.md b/docs/router/framework/react/api/router/useLoaderDataHook.md index 809fd3785ea..dfcf2d37583 100644 --- a/docs/router/framework/react/api/router/useLoaderDataHook.md +++ b/docs/router/framework/react/api/router/useLoaderDataHook.md @@ -3,7 +3,7 @@ id: useLoaderDataHook title: useLoaderData hook --- -The `useLoaderData` hook returns the loader data from the closest [`RouteMatch`](../RouteMatchType.md) in the component tree. +The `useLoaderData` hook returns the loader data from the closest [`RouteMatch`](./RouteMatchType.md) in the component tree. ## useLoaderData options @@ -34,7 +34,7 @@ The `useLoaderData` hook accepts an `options` object. - Type: `boolean` - Optional - Configures whether structural sharing is enabled for the value returned by `select`. -- See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. +- See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. ## useLoaderData returns diff --git a/docs/router/framework/react/api/router/useLoaderDepsHook.md b/docs/router/framework/react/api/router/useLoaderDepsHook.md index 7e3d43e2ca6..bf9a3a35ec2 100644 --- a/docs/router/framework/react/api/router/useLoaderDepsHook.md +++ b/docs/router/framework/react/api/router/useLoaderDepsHook.md @@ -26,7 +26,7 @@ The `useLoaderDepsHook` hook accepts an `options` object. - Type: `boolean` - Optional - Configures whether structural sharing is enabled for the value returned by `select`. -- See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. +- See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. ## useLoaderDeps returns diff --git a/docs/router/framework/react/api/router/useLocationHook.md b/docs/router/framework/react/api/router/useLocationHook.md index d5680958523..7bbccad150a 100644 --- a/docs/router/framework/react/api/router/useLocationHook.md +++ b/docs/router/framework/react/api/router/useLocationHook.md @@ -3,7 +3,7 @@ id: useLocationHook title: useLocation hook --- -The `useLocation` method is a hook that returns the current [`location`](../ParsedLocationType.md) object. This hook is useful for when you want to perform some side effect whenever the current location changes. +The `useLocation` method is a hook that returns the current [`location`](./ParsedLocationType.md) object. This hook is useful for when you want to perform some side effect whenever the current location changes. ## useLocation options @@ -13,11 +13,11 @@ The `useLocation` hook accepts an optional `options` object. - Type: `(state: ParsedLocationType) => TSelected` - Optional -- If supplied, this function will be called with the [`location`](../ParsedLocationType.md) object and the return value will be returned from `useLocation`. +- If supplied, this function will be called with the [`location`](./ParsedLocationType.md) object and the return value will be returned from `useLocation`. ## useLocation returns -- The current [`location`](../ParsedLocationType.md) object or `TSelected` if a `select` function is provided. +- The current [`location`](./ParsedLocationType.md) object or `TSelected` if a `select` function is provided. ## Examples diff --git a/docs/router/framework/react/api/router/useMatchHook.md b/docs/router/framework/react/api/router/useMatchHook.md index 5c43705b042..966fd1d7c11 100644 --- a/docs/router/framework/react/api/router/useMatchHook.md +++ b/docs/router/framework/react/api/router/useMatchHook.md @@ -3,7 +3,7 @@ id: useMatchHook title: useMatch hook --- -The `useMatch` hook returns a [`RouteMatch`](../RouteMatchType.md) in the component tree. The raw route match contains all of the information about a route match in the router and also powers many other hooks under the hood like `useParams`, `useLoaderData`, `useRouteContext`, and `useSearch`. +The `useMatch` hook returns a [`RouteMatch`](./RouteMatchType.md) in the component tree. The raw route match contains all of the information about a route match in the router and also powers many other hooks under the hood like `useParams`, `useLoaderData`, `useRouteContext`, and `useSearch`. ## useMatch options @@ -15,7 +15,7 @@ The `useMatch` hook accepts a single argument, an `options` object. - The route id of a match - Optional, but recommended for full type safety. - If `opts.strict` is `true`, `from` is required and TypeScript will warn for this option if it is not provided. -- If `opts.strict` is `false`, `from` must not be set and TypeScript will provided loosened types for the returned [`RouteMatch`](../RouteMatchType.md). +- If `opts.strict` is `false`, `from` must not be set and TypeScript will provided loosened types for the returned [`RouteMatch`](./RouteMatchType.md). ### `opts.strict` option @@ -35,7 +35,7 @@ The `useMatch` hook accepts a single argument, an `options` object. - Type: `boolean` - Optional - Configures whether structural sharing is enabled for the value returned by `select`. -- See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. +- See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. ### `opts.shouldThrow` option @@ -47,7 +47,7 @@ The `useMatch` hook accepts a single argument, an `options` object. ## useMatch returns - If a `select` function is provided, the return value of the `select` function. -- If no `select` function is provided, the [`RouteMatch`](../RouteMatchType.md) object or a loosened version of the `RouteMatch` object if `opts.strict` is `false`. +- If no `select` function is provided, the [`RouteMatch`](./RouteMatchType.md) object or a loosened version of the `RouteMatch` object if `opts.strict` is `false`. ## Examples diff --git a/docs/router/framework/react/api/router/useMatchRouteHook.md b/docs/router/framework/react/api/router/useMatchRouteHook.md index ab597abef85..01c26d07c6b 100644 --- a/docs/router/framework/react/api/router/useMatchRouteHook.md +++ b/docs/router/framework/react/api/router/useMatchRouteHook.md @@ -17,7 +17,7 @@ The `matchRoute` function is a function that can be used to match a route agains The `matchRoute` function accepts a single argument, an `options` object. -- Type: [`UseMatchRouteOptions`](../UseMatchRouteOptionsType.md) +- Type: [`UseMatchRouteOptions`](./UseMatchRouteOptionsType.md) ### matchRoute function returns diff --git a/docs/router/framework/react/api/router/useMatchesHook.md b/docs/router/framework/react/api/router/useMatchesHook.md index c8cc3ccaf82..d7a1be8dc35 100644 --- a/docs/router/framework/react/api/router/useMatchesHook.md +++ b/docs/router/framework/react/api/router/useMatchesHook.md @@ -3,10 +3,10 @@ id: useMatchesHook title: useMatches hook --- -The `useMatches` hook returns all of the [`RouteMatch`](../RouteMatchType.md) objects from the router **regardless of its callers position in the React component tree**. +The `useMatches` hook returns all of the [`RouteMatch`](./RouteMatchType.md) objects from the router **regardless of its callers position in the React component tree**. > [!TIP] -> If you only want the parent or child matches, then you can use the [`useParentMatches`](../useParentMatchesHook.md) or the [`useChildMatches`](../useChildMatchesHook.md) based on the selection you need. +> If you only want the parent or child matches, then you can use the [`useParentMatches`](./useParentMatchesHook.md) or the [`useChildMatches`](./useChildMatchesHook.md) based on the selection you need. ## useMatches options @@ -23,12 +23,12 @@ The `useMatches` hook accepts a single _optional_ argument, an `options` object. - Type: `boolean` - Optional - Configures whether structural sharing is enabled for the value returned by `select`. -- See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. +- See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. ## useMatches returns - If a `select` function is provided, the return value of the `select` function. -- If no `select` function is provided, an array of [`RouteMatch`](../RouteMatchType.md) objects. +- If no `select` function is provided, an array of [`RouteMatch`](./RouteMatchType.md) objects. ## Examples diff --git a/docs/router/framework/react/api/router/useNavigateHook.md b/docs/router/framework/react/api/router/useNavigateHook.md index 5c28804ce65..916d2cd2372 100644 --- a/docs/router/framework/react/api/router/useNavigateHook.md +++ b/docs/router/framework/react/api/router/useNavigateHook.md @@ -27,7 +27,7 @@ The `navigate` function is a function that can be used to navigate to a new loca The `navigate` function accepts a single argument, an `options` object. -- Type: [`NavigateOptions`](../NavigateOptionsType.md) +- Type: [`NavigateOptions`](./NavigateOptionsType.md) ### navigate function returns diff --git a/docs/router/framework/react/api/router/useParamsHook.md b/docs/router/framework/react/api/router/useParamsHook.md index b0624c71296..0f3ca88fcac 100644 --- a/docs/router/framework/react/api/router/useParamsHook.md +++ b/docs/router/framework/react/api/router/useParamsHook.md @@ -33,7 +33,7 @@ The `useParams` hook accepts an optional `options` object. - Type: `boolean` - Optional - Configures whether structural sharing is enabled for the value returned by `select`. -- See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. +- See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. ## useParams returns diff --git a/docs/router/framework/react/api/router/useParentMatchesHook.md b/docs/router/framework/react/api/router/useParentMatchesHook.md index c6c577fbe07..fe4068f3972 100644 --- a/docs/router/framework/react/api/router/useParentMatchesHook.md +++ b/docs/router/framework/react/api/router/useParentMatchesHook.md @@ -3,7 +3,7 @@ id: useParentMatchesHook title: useParentMatches hook --- -The `useParentMatches` hook returns all of the parent [`RouteMatch`](../RouteMatchType.md) objects from the root down to the immediate parent of the current match in context. **It does not include the current match, which can be obtained using the `useMatch` hook.** +The `useParentMatches` hook returns all of the parent [`RouteMatch`](./RouteMatchType.md) objects from the root down to the immediate parent of the current match in context. **It does not include the current match, which can be obtained using the `useMatch` hook.** > [!IMPORTANT] > If the router has pending matches and they are showing their pending component fallbacks, `router.state.pendingMatches` will used instead of `router.state.matches`. @@ -23,12 +23,12 @@ The `useParentMatches` hook accepts an optional `options` object. - Type: `boolean` - Optional - Configures whether structural sharing is enabled for the value returned by `select`. -- See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. +- See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. ## useParentMatches returns - If a `select` function is provided, the return value of the `select` function. -- If no `select` function is provided, an array of [`RouteMatch`](../RouteMatchType.md) objects. +- If no `select` function is provided, an array of [`RouteMatch`](./RouteMatchType.md) objects. ## Examples diff --git a/docs/router/framework/react/api/router/useRouterHook.md b/docs/router/framework/react/api/router/useRouterHook.md index 14d29a4955c..174829c256e 100644 --- a/docs/router/framework/react/api/router/useRouterHook.md +++ b/docs/router/framework/react/api/router/useRouterHook.md @@ -3,13 +3,13 @@ id: useRouterHook title: useRouter hook --- -The `useRouter` method is a hook that returns the current instance of [`Router`](../RouterType.md) from context. This hook is useful for accessing the router instance in a component. +The `useRouter` method is a hook that returns the current instance of [`Router`](./RouterType.md) from context. This hook is useful for accessing the router instance in a component. ## useRouter returns -- The current [`Router`](../RouterType.md) instance. +- The current [`Router`](./RouterType.md) instance. -> ⚠️⚠️⚠️ **`router.state` is always up to date, but NOT REACTIVE. If you use `router.state` in a component, the component will not re-render when the router state changes. To get a reactive version of the router state, use the [`useRouterState`](../useRouterStateHook.md) hook.** +> ⚠️⚠️⚠️ **`router.state` is always up to date, but NOT REACTIVE. If you use `router.state` in a component, the component will not re-render when the router state changes. To get a reactive version of the router state, use the [`useRouterState`](./useRouterStateHook.md) hook.** ## Examples diff --git a/docs/router/framework/react/api/router/useRouterStateHook.md b/docs/router/framework/react/api/router/useRouterStateHook.md index f83527cc500..bcded1d4158 100644 --- a/docs/router/framework/react/api/router/useRouterStateHook.md +++ b/docs/router/framework/react/api/router/useRouterStateHook.md @@ -6,7 +6,7 @@ title: useRouterState hook The `useRouterState` method is a hook that returns the current internal state of the router. This hook is useful for accessing the current state of the router in a component. > [!TIP] -> If you want to access the current location or the current matches, you should try out the [`useLocation`](../useLocationHook.md) and [`useMatches`](../useMatchesHook.md) hooks first. These hooks are designed to be more ergonomic and easier to use than accessing the router state directly. +> If you want to access the current location or the current matches, you should try out the [`useLocation`](./useLocationHook.md) and [`useMatches`](./useMatchesHook.md) hooks first. These hooks are designed to be more ergonomic and easier to use than accessing the router state directly. ## useRouterState options @@ -16,18 +16,18 @@ The `useRouterState` hook accepts an optional `options` object. - Type: `(state: RouterState) => TSelected` - Optional -- If supplied, this function will be called with the [`RouterState`](../RouterStateType.md) object and the return value will be returned from `useRouterState`. +- If supplied, this function will be called with the [`RouterState`](./RouterStateType.md) object and the return value will be returned from `useRouterState`. ### `opts.structuralSharing` option - Type: `boolean` - Optional - Configures whether structural sharing is enabled for the value returned by `select`. -- See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. +- See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. ## useRouterState returns -- The current [`RouterState`](../RouterStateType.md) object or `TSelected` if a `select` function is provided. +- The current [`RouterState`](./RouterStateType.md) object or `TSelected` if a `select` function is provided. ## Examples diff --git a/docs/router/framework/react/api/router/useSearchHook.md b/docs/router/framework/react/api/router/useSearchHook.md index 985b42b2062..39c8ed5d9e2 100644 --- a/docs/router/framework/react/api/router/useSearchHook.md +++ b/docs/router/framework/react/api/router/useSearchHook.md @@ -33,7 +33,7 @@ The `useSearch` hook accepts an `options` object. - Type: `boolean` - Optional - Configures whether structural sharing is enabled for the value returned by `select`. -- See the [Render Optimizations guide](../../../guide/render-optimizations.md) for more information. +- See the [Render Optimizations guide](../../guide/render-optimizations.md) for more information. ### `opts.strict` option diff --git a/docs/router/framework/react/decisions-on-dx.md b/docs/router/framework/react/decisions-on-dx.md index 1e738344806..cdc82ec3bbf 100644 --- a/docs/router/framework/react/decisions-on-dx.md +++ b/docs/router/framework/react/decisions-on-dx.md @@ -90,7 +90,7 @@ This only gets worse as you begin to use more features of the router, such as ne What we found to be the best way to define your routes is to abstract the definition of the route configuration outside of the route-tree. Then stitch together your route configurations into a single cohesive route-tree that is then passed into the `createRouter` function. -You can read more about [code-based routing](../routing/code-based-routing.md) to see how to define your routes in this way. +You can read more about [code-based routing](./routing/code-based-routing.md) to see how to define your routes in this way. > [!TIP] > Finding Code-based routing to be a bit too cumbersome? See why [file-based routing](#why-is-file-based-routing-the-preferred-way-to-define-routes) is the preferred way to define your routes. @@ -160,7 +160,7 @@ We went with **module declaration**, as it is what we found to be the most scala Something you'll notice (quite soon) in the TanStack Router documentation is that we push for **file-based routing** as the preferred method for defining your routes. This is because we've found that file-based routing is the most scalable and maintainable way to define your routes. > [!TIP] -> Before you continue, it's important you have a good understanding of [code-based routing](../routing/code-based-routing.md) and [file-based routing](../routing/file-based-routing.md). +> Before you continue, it's important you have a good understanding of [code-based routing](./routing/code-based-routing.md) and [file-based routing](./routing/file-based-routing.md). As mentioned in the beginning, TanStack Router was designed for complex applications that require a high degree of type-safety and maintainability. And to achieve this, the configuration of the router has been done in a precise way that allows TypeScript to infer the types of your routes as much as possible. @@ -234,4 +234,4 @@ That's it! No need to worry about defining the `getParentRoute` function, stitch At no point does the TanStack Router Bundler Plugin take away your control over your route configurations. It's designed to be as flexible as possible, allowing you to define your routes in a way that suits your application whilst reducing the boilerplate and complexity of the route configuration. -Check out the guides for [file-based routing](../routing/file-based-routing.md) and [code-splitting](../guide/code-splitting.md) for a more in-depth explanation of how they work in TanStack Router. +Check out the guides for [file-based routing](./routing/file-based-routing.md) and [code-splitting](./guide/code-splitting.md) for a more in-depth explanation of how they work in TanStack Router. diff --git a/docs/router/framework/react/faq.md b/docs/router/framework/react/faq.md index f66ffca03c0..a7c0887298a 100644 --- a/docs/router/framework/react/faq.md +++ b/docs/router/framework/react/faq.md @@ -16,7 +16,7 @@ These frameworks and routers have their strengths, but they also come with trade ## Is TanStack Router a framework? TanStack Router itself is not a "framework" in the traditional sense, since it doesn't address a few other common full-stack concerns. However, TanStack Router has been designed to be upgradable to a full-stack framework when used in conjunction with other tools that address bundling, deployments, and server-side-specific functionality. This is why we are currently developing [TanStack Start](https://tanstack.com/start), a full-stack framework that is built on top of TanStack Router and Vite. -For a deeper dive on the history of TanStack Router, feel free to read [TanStack Router's History](../decisions-on-dx.md#tanstack-routers-origin-story). +For a deeper dive on the history of TanStack Router, feel free to read [TanStack Router's History](./decisions-on-dx.md#tanstack-routers-origin-story). ## Should I commit my `routeTree.gen.ts` file into git? @@ -28,7 +28,7 @@ You should commit this file into git so that other developers can use it to buil No, the root route is always rendered as it is the entry point of your application. -If you need to conditionally render a route's component, this usually means that the page content needs to be different based on some condition (e.g. user authentication). For this use case, you should use a [Layout Route](../routing/routing-concepts.md#layout-routes) or a [Pathless Layout Route](../routing/routing-concepts.md#pathless-layout-routes) to conditionally render the content. +If you need to conditionally render a route's component, this usually means that the page content needs to be different based on some condition (e.g. user authentication). For this use case, you should use a [Layout Route](./routing/routing-concepts.md#layout-routes) or a [Pathless Layout Route](./routing/routing-concepts.md#pathless-layout-routes) to conditionally render the content. You can restrict access to these routes using a conditional check in the `beforeLoad` function of the route. diff --git a/docs/router/framework/react/guide/authenticated-routes.md b/docs/router/framework/react/guide/authenticated-routes.md index d94ecac5419..32ffa61ef9d 100644 --- a/docs/router/framework/react/guide/authenticated-routes.md +++ b/docs/router/framework/react/guide/authenticated-routes.md @@ -83,7 +83,7 @@ If your authentication flow relies on interactions with React context and/or hoo > [!IMPORTANT] > React hooks are not meant to be consumed outside of React components. If you need to use a hook outside of a React component, you need to extract the returned state from the hook in a component that wraps your `` and then pass the returned value down to TanStack Router. -We'll cover the `router.context` options in-detail in the [Router Context](../router-context.md) section. +We'll cover the `router.context` options in-detail in the [Router Context](./router-context.md) section. Here's an example that uses React context and hooks for protecting authenticated routes in TanStack Router. See the entire working setup in the [Authenticated Routes example](https://github.com/TanStack/router/tree/main/examples/react/authenticated-routes). @@ -171,9 +171,9 @@ This approach can also be used in conjunction with Pathless or Layout Route to p For detailed, step-by-step implementation guides, see: -- [How to Set Up Basic Authentication](../../how-to/setup-authentication.md) - Complete setup with React Context and protected routes -- [How to Integrate Authentication Providers](../../how-to/setup-auth-providers.md) - Use Auth0, Clerk, or Supabase -- [How to Set Up Role-Based Access Control](../../how-to/setup-rbac.md) - Implement permissions and role-based routing +- [How to Set Up Basic Authentication](../how-to/setup-authentication.md) - Complete setup with React Context and protected routes +- [How to Integrate Authentication Providers](../how-to/setup-auth-providers.md) - Use Auth0, Clerk, or Supabase +- [How to Set Up Role-Based Access Control](../how-to/setup-rbac.md) - Implement permissions and role-based routing ## Examples diff --git a/docs/router/framework/react/guide/code-splitting.md b/docs/router/framework/react/guide/code-splitting.md index d655096ffdc..e422562725d 100644 --- a/docs/router/framework/react/guide/code-splitting.md +++ b/docs/router/framework/react/guide/code-splitting.md @@ -71,7 +71,7 @@ This is the easiest and most powerful way to code split your route files. When using the `autoCodeSplitting` feature, TanStack Router will automatically code split your route files based on the non-critical route configuration mentioned above. > [!IMPORTANT] -> The automatic code-splitting feature is **ONLY** available when you are using file-based routing with one of our [supported bundlers](../../routing/file-based-routing.md#getting-started-with-file-based-routing). +> The automatic code-splitting feature is **ONLY** available when you are using file-based routing with one of our [supported bundlers](../routing/file-based-routing.md#getting-started-with-file-based-routing). > This will **NOT** work if you are **only** using the CLI (`@tanstack/router-cli`). To enable automatic code-splitting, you just need to add the following to the configuration of your TanStack Router Bundler Plugin: @@ -95,7 +95,7 @@ export default defineConfig({ That's it! TanStack Router will automatically code-split all your route files by their critical and non-critical route configurations. -If you want more control over the code-splitting process, head over to the [Automatic Code Splitting](../automatic-code-splitting.md) guide to learn more about the options available. +If you want more control over the code-splitting process, head over to the [Automatic Code Splitting](./automatic-code-splitting.md) guide to learn more about the options available. ## Using the `.lazy.tsx` suffix diff --git a/docs/router/framework/react/guide/creating-a-router.md b/docs/router/framework/react/guide/creating-a-router.md index d18d6329ca7..d84815bd7ce 100644 --- a/docs/router/framework/react/guide/creating-a-router.md +++ b/docs/router/framework/react/guide/creating-a-router.md @@ -18,7 +18,7 @@ const router = createRouter({ You'll probably notice quickly that the `Router` constructor requires a `routeTree` option. This is the route tree that the router will use to match routes and render components. -Whether you used [file-based routing](../../routing/file-based-routing.md) or [code-based routing](../../routing/code-based-routing.md), you'll need to pass your route tree to the `createRouter` function: +Whether you used [file-based routing](../routing/file-based-routing.md) or [code-based routing](../routing/code-based-routing.md), you'll need to pass your route tree to the `createRouter` function: ### Filesystem Route Tree @@ -73,4 +73,4 @@ export const Route = createRootRoute({ ## Other Options -There are many other options that can be passed to the `Router` constructor. You can find a full list of them in the [API Reference](../../api/router/RouterOptionsType.md). +There are many other options that can be passed to the `Router` constructor. You can find a full list of them in the [API Reference](../api/router/RouterOptionsType.md). diff --git a/docs/router/framework/react/guide/custom-search-param-serialization.md b/docs/router/framework/react/guide/custom-search-param-serialization.md index 11f3329edc5..33124513e8a 100644 --- a/docs/router/framework/react/guide/custom-search-param-serialization.md +++ b/docs/router/framework/react/guide/custom-search-param-serialization.md @@ -38,7 +38,7 @@ const router = createRouter({ However, this default behavior may not be suitable for all use cases. For example, you may want to use a different serialization format, such as base64 encoding, or you may want to use a purpose-built serialization/deserialization library, like [query-string](https://github.com/sindresorhus/query-string), [JSURL2](https://github.com/wmertens/jsurl2), or [Zipson](https://jgranstrom.github.io/zipson/). -This can be achieved by providing your own serialization and deserialization functions to the `parseSearch` and `stringifySearch` options in the [`Router`](../../api/router/RouterOptionsType.md#stringifysearch-method) configuration. When doing this, you can utilize TanStack Router's built-in helper functions, `parseSearchWith` and `stringifySearchWith`, to simplify the process. +This can be achieved by providing your own serialization and deserialization functions to the `parseSearch` and `stringifySearch` options in the [`Router`](../api/router/RouterOptionsType.md#stringifysearch-method) configuration. When doing this, you can utilize TanStack Router's built-in helper functions, `parseSearchWith` and `stringifySearchWith`, to simplify the process. > [!TIP] > An important aspect of serialization and deserialization, is that you are able to get the same object back after deserialization. This is important because if the serialization and deserialization process is not done correctly, you may lose some information. For example, if you are using a library that does not support nested objects, you may lose the nested object when deserializing the search string. diff --git a/docs/router/framework/react/guide/data-loading.md b/docs/router/framework/react/guide/data-loading.md index eb449e27435..6f54e37d997 100644 --- a/docs/router/framework/react/guide/data-loading.md +++ b/docs/router/framework/react/guide/data-loading.md @@ -49,7 +49,7 @@ TanStack Router Cache Cons: - No built-in cache-level optimistic update APIs (you can still use ephemeral state from something like a `useMutation` hook to achieve this at the component level) > [!TIP] -> If you know right away that you'd like to or need to use something more robust like TanStack Query, skip to the [External Data Loading](../external-data-loading.md) guide. +> If you know right away that you'd like to or need to use something more robust like TanStack Query, skip to the [External Data Loading](./external-data-loading.md) guide. ## Using the Router Cache @@ -222,7 +222,7 @@ To opt out of preloading, don't turn it on via the `routerOptions.defaultPreload ## Passing all loader events to an external cache -We break down this use case in the [External Data Loading](../external-data-loading.md) page, but if you'd like to use an external cache like TanStack Query, you can do so by passing all loader events to your external cache. As long as you are using the defaults, the only change you'll need to make is to set the `defaultPreloadStaleTime` option on the router to `0`: +We break down this use case in the [External Data Loading](./external-data-loading.md) page, but if you'd like to use an external cache like TanStack Query, you can do so by passing all loader events to your external cache. As long as you are using the defaults, the only change you'll need to make is to set the `defaultPreloadStaleTime` option on the router to `0`: ```tsx const router = createRouter({ @@ -404,7 +404,7 @@ export const Route = createFileRoute('/posts')({ Ideally most route loaders can resolve their data within a short moment, removing the need to render a placeholder spinner and simply rely on suspense to render the next route when it's completely ready. When critical data that is required to render a route's component is slow though, you have 2 options: -- Split up your fast and slow data into separate promises and `defer` the slow data until after the fast data is loaded (see the [Deferred Data Loading](../deferred-data-loading.md) guide). +- Split up your fast and slow data into separate promises and `defer` the slow data until after the fast data is loaded (see the [Deferred Data Loading](./deferred-data-loading.md) guide). - Show a pending component after an optimistic suspense threshold until all of the data is ready (See below). ## Showing a pending component diff --git a/docs/router/framework/react/guide/deferred-data-loading.md b/docs/router/framework/react/guide/deferred-data-loading.md index c60086d5646..8ba29da9e32 100644 --- a/docs/router/framework/react/guide/deferred-data-loading.md +++ b/docs/router/framework/react/guide/deferred-data-loading.md @@ -62,7 +62,7 @@ function PostIdComponent() { ``` > [!TIP] -> If your component is code-split, you can use the [getRouteApi function](../code-splitting.md#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to import the `Route` configuration to get access to the typed `useLoaderData()` hook. +> If your component is code-split, you can use the [getRouteApi function](./code-splitting.md#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to import the `Route` configuration to get access to the typed `useLoaderData()` hook. The `Await` component resolves the promise by triggering the nearest suspense boundary until it is resolved, after which it renders the component's `children` as a function with the resolved data. @@ -77,7 +77,7 @@ If the promise is rejected, the `Await` component will throw the serialized erro ## Deferred Data Loading with External libraries -When your strategy for fetching information for the route relies on [External Data Loading](../external-data-loading.md) with an external library like [TanStack Query](https://tanstack.com/query), deferred data loading works a bit differently, as the library handles the data fetching and caching for you outside of TanStack Router. +When your strategy for fetching information for the route relies on [External Data Loading](./external-data-loading.md) with an external library like [TanStack Query](https://tanstack.com/query), deferred data loading works a bit differently, as the library handles the data fetching and caching for you outside of TanStack Router. So, instead of using `defer` and `Await`, you'll instead want to use the Route's `loader` to kick off the data fetching and then use the library's hooks to access the data in your components. @@ -139,7 +139,7 @@ Streamed promises follow the same lifecycle as the loader data they are associat **Streaming requires a server that supports it and for TanStack Router to be configured to use it properly.** -Please read the entire [Streaming SSR Guide](../ssr.md#streaming-ssr) for step by step instructions on how to set up your server for streaming. +Please read the entire [Streaming SSR Guide](./ssr.md#streaming-ssr) for step by step instructions on how to set up your server for streaming. ## SSR Streaming Lifecycle diff --git a/docs/router/framework/react/guide/external-data-loading.md b/docs/router/framework/react/guide/external-data-loading.md index 2bf31c19037..a636bdfd789 100644 --- a/docs/router/framework/react/guide/external-data-loading.md +++ b/docs/router/framework/react/guide/external-data-loading.md @@ -4,7 +4,7 @@ title: External Data Loading --- > [!IMPORTANT] -> This guide is geared towards external state management libraries and their integration with TanStack Router for data fetching, ssr, hydration/dehydration and streaming. If you haven't read the standard [Data Loading](../data-loading.md) guide, please do so first. +> This guide is geared towards external state management libraries and their integration with TanStack Router for data fetching, ssr, hydration/dehydration and streaming. If you haven't read the standard [Data Loading](./data-loading.md) guide, please do so first. ## To **Store** or to **Coordinate**? diff --git a/docs/router/framework/react/guide/history-types.md b/docs/router/framework/react/guide/history-types.md index 5559788d80f..c65afccd277 100644 --- a/docs/router/framework/react/guide/history-types.md +++ b/docs/router/framework/react/guide/history-types.md @@ -52,4 +52,4 @@ const memoryHistory = createMemoryHistory({ const router = createRouter({ routeTree, history: memoryHistory }) ``` -Refer to the [SSR Guide](../ssr.md#server-history) for usage on the server for server-side rendering. +Refer to the [SSR Guide](./ssr.md#server-history) for usage on the server for server-side rendering. diff --git a/docs/router/framework/react/guide/navigation-blocking.md b/docs/router/framework/react/guide/navigation-blocking.md index a82626cfc00..5fa852301e6 100644 --- a/docs/router/framework/react/guide/navigation-blocking.md +++ b/docs/router/framework/react/guide/navigation-blocking.md @@ -98,7 +98,7 @@ function MyComponent() { } ``` -You can find more information about the `useBlocker` hook in the [API reference](../../api/router/useBlockerHook.md). +You can find more information about the `useBlocker` hook in the [API reference](../api/router/useBlockerHook.md). ## Component-based blocking diff --git a/docs/router/framework/react/guide/not-found-errors.md b/docs/router/framework/react/guide/not-found-errors.md index e370a805aa3..ed156cb99d7 100644 --- a/docs/router/framework/react/guide/not-found-errors.md +++ b/docs/router/framework/react/guide/not-found-errors.md @@ -258,7 +258,7 @@ export const Route = createFileRoute('/posts/$postId')({ ## Usage With SSR -See [SSR guide](../ssr.md) for more information. +See [SSR guide](./ssr.md) for more information. ## Migrating from `NotFoundRoute` diff --git a/docs/router/framework/react/guide/path-params.md b/docs/router/framework/react/guide/path-params.md index 74c8e0ab413..4ebd477ace2 100644 --- a/docs/router/framework/react/guide/path-params.md +++ b/docs/router/framework/react/guide/path-params.md @@ -68,7 +68,7 @@ function PostComponent() { } ``` -> 🧠 Quick tip: If your component is code-split, you can use the [getRouteApi function](../code-splitting.md#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to import the `Route` configuration to get access to the typed `useParams()` hook. +> 🧠 Quick tip: If your component is code-split, you can use the [getRouteApi function](./code-splitting.md#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to import the `Route` configuration to get access to the typed `useParams()` hook. ## Path Params outside of Routes @@ -740,7 +740,7 @@ Optional path parameters provide a powerful and flexible foundation for implemen ## Allowed Characters -By default, path params are escaped with `encodeURIComponent`. If you want to allow other valid URI characters (e.g. `@` or `+`), you can specify that in your [RouterOptions](../../api/router/RouterOptionsType.md#pathparamsallowedcharacters-property). +By default, path params are escaped with `encodeURIComponent`. If you want to allow other valid URI characters (e.g. `@` or `+`), you can specify that in your [RouterOptions](../api/router/RouterOptionsType.md#pathparamsallowedcharacters-property). Example usage: diff --git a/docs/router/framework/react/guide/route-masking.md b/docs/router/framework/react/guide/route-masking.md index d46dbc7f334..b31647db810 100644 --- a/docs/router/framework/react/guide/route-masking.md +++ b/docs/router/framework/react/guide/route-masking.md @@ -9,7 +9,7 @@ Route masking is a way to mask the actual URL of a route that gets persisted to - Navigating to a route with the search param `?showLogin=true`, but masking the URL to _not_ contain the search param - Navigating to a route with the search param `?modal=settings`, but masking the URL as `/settings' -Each of these scenarios can be achieved with route masking and even extended to support more advanced patterns like [parallel routes](../parallel-routes.md). +Each of these scenarios can be achieved with route masking and even extended to support more advanced patterns like [parallel routes](./parallel-routes.md). ## How does route masking work? diff --git a/docs/router/framework/react/guide/search-params.md b/docs/router/framework/react/guide/search-params.md index dec18506718..ce3096cefbf 100644 --- a/docs/router/framework/react/guide/search-params.md +++ b/docs/router/framework/react/guide/search-params.md @@ -363,7 +363,7 @@ Once your search params have been validated and typed, you're finally ready to s ### Using Search Params in Loaders -Please read the [Search Params in Loaders](../data-loading.md#using-loaderdeps-to-access-search-params) section for more information about how to read search params in loaders with the `loaderDeps` option. +Please read the [Search Params in Loaders](./data-loading.md#using-loaderdeps-to-access-search-params) section for more information about how to read search params in loaders with the `loaderDeps` option. ### Search Params are inherited from Parent Routes @@ -415,7 +415,7 @@ const ProductList = () => { ``` > [!TIP] -> If your component is code-split, you can use the [getRouteApi function](../code-splitting.md#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to import the `Route` configuration to get access to the typed `useSearch()` hook. +> If your component is code-split, you can use the [getRouteApi function](./code-splitting.md#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to import the `Route` configuration to get access to the typed `useSearch()` hook. ### Search Params outside of Route Components diff --git a/docs/router/framework/react/guide/ssr.md b/docs/router/framework/react/guide/ssr.md index 2a52914199d..73ab21276fe 100644 --- a/docs/router/framework/react/guide/ssr.md +++ b/docs/router/framework/react/guide/ssr.md @@ -46,7 +46,7 @@ Resolved loader data fetched by routes is automatically dehydrated and rehydrate ⚠️ If you are using deferred data streaming, you will also need to ensure that you have implemented the [SSR Streaming & Stream Transform](#streaming-ssr) pattern near the end of this guide. -For more information on how to utilize data loading, see the [Data Loading](../data-loading.md) guide. +For more information on how to utilize data loading, see the [Data Loading](./data-loading.md) guide. ### Router Creation diff --git a/docs/router/framework/react/guide/type-safety.md b/docs/router/framework/react/guide/type-safety.md index b5a45f6a9d0..fe17ae3d69a 100644 --- a/docs/router/framework/react/guide/type-safety.md +++ b/docs/router/framework/react/guide/type-safety.md @@ -65,7 +65,7 @@ function PostsComponent() { Every hook and component that requires a context hint will have a `from` param where you can pass the ID or path of the route you are rendering within. -> 🧠 Quick tip: If your component is code-split, you can use the [getRouteApi function](../code-splitting.md#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to pass in the `Route.fullPath` to get access to the typed `useParams()` and `useSearch()` hooks. +> 🧠 Quick tip: If your component is code-split, you can use the [getRouteApi function](./code-splitting.md#manually-accessing-route-apis-in-other-files-with-the-getrouteapi-helper) to avoid having to pass in the `Route.fullPath` to get access to the typed `useParams()` and `useSearch()` hooks. ### What if I don't know the route? What if it's a shared component? diff --git a/docs/router/framework/react/how-to/arrays-objects-dates-search-params.md b/docs/router/framework/react/how-to/arrays-objects-dates-search-params.md index af31fb8a0b6..3c0613434e6 100644 --- a/docs/router/framework/react/how-to/arrays-objects-dates-search-params.md +++ b/docs/router/framework/react/how-to/arrays-objects-dates-search-params.md @@ -756,7 +756,7 @@ const onlyNeededData = Route.useSearch({ ## Related Resources -- [Search Params Guide](../../guide/search-params.md) - Core concepts and JSON-first approach +- [Search Params Guide](../guide/search-params.md) - Core concepts and JSON-first approach - [Zod Documentation](https://zod.dev/) - Schema validation library - [MDN Date.toISOString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) - Date serialization reference - [URLSearchParams Limits](https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers) - Browser URL length limits diff --git a/docs/router/framework/react/how-to/debug-router-issues.md b/docs/router/framework/react/how-to/debug-router-issues.md index 2d698121a65..b4d20ec72fb 100644 --- a/docs/router/framework/react/how-to/debug-router-issues.md +++ b/docs/router/framework/react/how-to/debug-router-issues.md @@ -753,8 +753,8 @@ const route = createRoute({ After debugging router issues, you might want to: -- [How to Set Up Testing](../setup-testing.md) - Add tests to prevent regressions -- [How to Deploy to Production](../deploy-to-production.md) - Ensure issues don't occur in production +- [How to Set Up Testing](./setup-testing.md) - Add tests to prevent regressions +- [How to Deploy to Production](./deploy-to-production.md) - Ensure issues don't occur in production