useRouteData

`useRouteData` gives you the data defined for the route.

ts
const dataconst data: unknown = useRouteData(alias) useRouteData<unknown>(): unknown
import useRouteData();

ts
const dataconst data: unknown = useRouteData(alias) useRouteData<unknown>(): unknown
import useRouteData();

Usage
Retrieving data from the routeData function
Reference
useRouteData()

Usage

Retrieving data from the routeData function

SolidStart's file system routing allows components defined under the /routes to define a routeData function that executes when navigation begins to that component. It does so in parallel to loading the code for it.

You can use whatever is returned from the routeData function in your component by calling useRouteData.

ts
import { createResourceCreates a resource that wraps a repeated promise in a reactive pattern:
```typescript
// Without source
const [resource, { mutate, refetch }] = createResource(fetcher, options);
// With source
const [resource, { mutate, refetch }] = createResource(source, fetcher, options);
```

(alias) function createResource<T, R = unknown>(fetcher: ResourceFetcher<true, T, R>, options: InitializedResourceOptions<NoInfer<T>, true>): InitializedResourceReturn<T, R> (+3 overloads)
import createResource } from "solid-js";
import { useRouteData(alias) const useRouteData: <T>() => MaybeReturnType<T>
import useRouteData, RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs } from "solid-start";
 
export function routeDatafunction routeData({ params }: RouteDataArgs): Resource<{
    name: string;
}>({ params(parameter) params: Params }: RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs) {
  // load some data
  const [usersconst users: Resource<{
    name: string;
}>] = createResourceCreates a resource that wraps a repeated promise in a reactive pattern:
```typescript
// Without source
const [resource, { mutate, refetch }] = createResource(fetcher, options);
// With source
const [resource, { mutate, refetch }] = createResource(source, fetcher, options);
```

(alias) createResource<{
    name: string;
}, unknown>(fetcher: ResourceFetcher<true, {
    name: string;
}, unknown>, options?: ResourceOptions<{
    name: string;
}, true> | undefined): ResourceReturn<{
    name: string;
}, unknown> (+3 overloads)
import createResource(fetchUserslet fetchUsers: () => Promise<{
    name: string;
}>);
  return usersconst users: Resource<{
    name: string;
}>;
}
 
export default function Componentfunction Component(): void() {
  const usersconst users: Resource<{
    name: string;
}> = useRouteData(alias) useRouteData<({ params }: RouteDataArgs<unknown>) => Resource<{
    name: string;
}>>(): Resource<{
    name: string;
}>
import useRouteData<typeof routeDatafunction routeData({ params }: RouteDataArgs<unknown>): Resource<{
    name: string;
}>>();
}

ts
import { createResourceCreates a resource that wraps a repeated promise in a reactive pattern:
```typescript
// Without source
const [resource, { mutate, refetch }] = createResource(fetcher, options);
// With source
const [resource, { mutate, refetch }] = createResource(source, fetcher, options);
```

(alias) function createResource<T, R = unknown>(fetcher: ResourceFetcher<true, T, R>, options: InitializedResourceOptions<NoInfer<T>, true>): InitializedResourceReturn<T, R> (+3 overloads)
import createResource } from "solid-js";
import { useRouteData(alias) const useRouteData: <T>() => MaybeReturnType<T>
import useRouteData, RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs } from "solid-start";
 
export function routeDatafunction routeData({ params }: RouteDataArgs): Resource<{
    name: string;
}>({ params(parameter) params: Params }: RouteDataArgs(alias) interface RouteDataArgs<T = unknown>
import RouteDataArgs) {
  // load some data
  const [usersconst users: Resource<{
    name: string;
}>] = createResourceCreates a resource that wraps a repeated promise in a reactive pattern:
```typescript
// Without source
const [resource, { mutate, refetch }] = createResource(fetcher, options);
// With source
const [resource, { mutate, refetch }] = createResource(source, fetcher, options);
```

(alias) createResource<{
    name: string;
}, unknown>(fetcher: ResourceFetcher<true, {
    name: string;
}, unknown>, options?: ResourceOptions<{
    name: string;
}, true> | undefined): ResourceReturn<{
    name: string;
}, unknown> (+3 overloads)
import createResource(fetchUserslet fetchUsers: () => Promise<{
    name: string;
}>);
  return usersconst users: Resource<{
    name: string;
}>;
}
 
export default function Componentfunction Component(): void() {
  const usersconst users: Resource<{
    name: string;
}> = useRouteData(alias) useRouteData<({ params }: RouteDataArgs<unknown>) => Resource<{
    name: string;
}>>(): Resource<{
    name: string;
}>
import useRouteData<typeof routeDatafunction routeData({ params }: RouteDataArgs<unknown>): Resource<{
    name: string;
}>>();
}

Reference

`useRouteData()`

Call useRouteData() inside a component to get the data from the nearest ancestor route section.

tsx
import { useRouteData(alias) const useRouteData: <T>() => MaybeReturnType<T>
import useRouteData } from "solid-start";
 
function Componentfunction Component(): void() {
  const dataconst data: unknown = useRouteData(alias) useRouteData<unknown>(): unknown
import useRouteData();
}

tsx
import { useRouteData(alias) const useRouteData: <T>() => MaybeReturnType<T>
import useRouteData } from "solid-start";
 
function Componentfunction Component(): void() {
  const dataconst data: unknown = useRouteData(alias) useRouteData<unknown>(): unknown
import useRouteData();
}

Returns

Whatever is returned by the nearest ancestor routeData function.