Solid Router

https://docs.solidjs.com/solid-router/
Admin
Solid Router is the universal router for Solid that enables client and server-side routing for...
Tokens:54,988
Snippets:509
Trust Score:9.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Basic usage of A with Router

Source: https://docs.solidjs.com/solid-router/reference/components/a

Basic usage example showing how to use the A component within a Router setup. Includes a Layout component with navigation links and route definitions.

```typescript
import { A, Route, Router } from "@solidjs/router";


function Layout(props) {
  return (
    <>
      <nav>
        <A href="/">Home</A>
        <A href="/docs" activeClass="selected">
          Docs
        </A>
      </nav>
      {props.children}
    </>
  );
}


export default function App() {
  return (
    <Router root={Layout}>
      <Route path="/" component={() => <h1>Home</h1>} />
      <Route path="/docs" component={() => <h1>Docs</h1>} />
    </Router>
  );
}
```

--------------------------------

### Install @solidjs/router with npm, pnpm, yarn, bun, or deno

Source: https://docs.solidjs.com/solid-router/getting-started/installation-and-setup

Install Solid Router with your preferred package manager. Each command installs the @solidjs/router package for the corresponding tool.

```bash
npm i @solidjs/router
```

```bash
pnpm i @solidjs/router
```

```bash
yarn add @solidjs/router
```

```bash
bun i @solidjs/router
```

```bash
deno add npm:@solidjs/router
```

--------------------------------

### Example: createAsyncStore with reactive arguments

Source: https://docs.solidjs.com/solid-router/reference/data-apis/create-async-store

Example showing how to use createAsyncStore with a query that depends on a reactive signal. The query fetches notifications based on an unreadOnly boolean, and the store is initialized with an empty array. The component toggles the unreadOnly signal and renders the notifications.

```tsx
import { For, createSignal } from "solid-js";
import { createAsyncStore, query } from "@solidjs/router";


type Notification = {
  id: string;
  message: string;
  user: { name: string };
};


const getNotifications = query(async (unreadOnly: boolean) => {
  const response = await fetch(`/api/notifications?unread=${unreadOnly}`);
  return response.json() as Promise<Notification[]>;
}, "notifications");


function Notifications() {
  const [unreadOnly, setUnreadOnly] = createSignal(false);
  const notifications = createAsyncStore(() => getNotifications(unreadOnly()), {
    initialValue: [],
  });


  return (
    <>
      <button onClick={() => setUnreadOnly((value) => !value)}>
        Toggle unread
      </button>
      <ul>
        <For each={notifications()}>
          {(notification) => (
            <li>
              <div>{notification.message}</div>
              <div>{notification.user.name}</div>
            </li>
          )}
        </For>
      </ul>
    </>
  );
}
```

--------------------------------

### Basic useAction Example

Source: https://docs.solidjs.com/solid-router/reference/data-apis/use-action

Basic usage example: defines an action 'likePost' and uses useAction to call it from a button click handler.

```typescript
import { action, useAction } from "@solidjs/router";


const likePost = action(async (id: string) => {
  return id;
}, "likePost");


function LikeButton(props: { id: string }) {
  const like = useAction(likePost);


  return <button onClick={() => like(props.id)}>Like</button>;
}
```

--------------------------------

### Basic Route usage with Router

Source: https://docs.solidjs.com/solid-router/reference/components/route

Basic usage example: defines a Home component and registers it as the route for the root path "/" inside a Router. Demonstrates the minimal setup for a single route.

```jsx
import { Route, Router } from "@solidjs/router";


function Home() {
  return <h1>Home</h1>;
}


export default function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
    </Router>
  );
}
```

--------------------------------

### Basic useSearchParams Example

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-search-params

Basic usage example showing how to read and update query parameters with useSearchParams in a Solid component.

```tsx
import { useSearchParams } from "@solidjs/router";


function Paginator() {
  const [params, setParams] = useSearchParams();


  const page = () => Number(params.page || "1");


  return (
    <div>
      <span>Current Page: {page()}</span>
      <button onClick={() => setParams({ page: page() + 1 })}>Next</button>
    </div>
  );
}
```

--------------------------------

### Basic usage of useIsRouting

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-is-routing

Basic usage example showing how to use useIsRouting to display a loading message during route transitions.

```javascript
import { Show } from "solid-js";
import { useIsRouting } from "@solidjs/router";


function PendingRoute() {
  const isRouting = useIsRouting();


  return <Show when={isRouting()}>Loading route...</Show>;
}
```

--------------------------------

### Basic Router Usage

Source: https://docs.solidjs.com/solid-router/reference/components/router

Example of initializing a Router with a root layout component and a basic route definition.

```typescript

import { render } from "solid-js/web";
import { Route, Router } from "@solidjs/router";


function Layout(props) {
  return (
    <>
      <h1>Root header</h1>
      {props.children}
    </>
  );
}


render(
  () => (
    <Router root={Layout}>
      <Route path="/" component={() => <h2>Home</h2>} />
    </Router>
  ),
  document.getElementById("root")!
);

```

--------------------------------

### createAsync

Source: https://docs.solidjs.com/solid-router/reference/data-apis/create-async

Documentation for the createAsync function from @solidjs/router, including its type signature, parameters, return value, behavior, and usage examples.

```APIDOC
## createAsync

### Description
`createAsync` is a wrapper around `createResource` that tracks a promise-returning function and returns the resolved value through an accessor with a `latest` property.

### Import
```
import { createAsync } from "@solidjs/router";
```

### Type
```
type AccessorWithLatest<T> = {
  (): T;
  latest: T;
};

function createAsync<T>(
  fn: (prev: T) => Promise<T>,
  options: {
    name?: string;
    initialValue: T;
    deferStream?: boolean;
  }
): AccessorWithLatest<T>;

function createAsync<T>(
  fn: (prev: T | undefined) => Promise<T>,
  options?: {
    name?: string;
    initialValue?: T;
    deferStream?: boolean;
  }
): AccessorWithLatest<T | undefined>;
```

### Parameters
#### `fn`
- **Type:** `(prev: T | undefined) => Promise<T>`
- **Required:** Yes

Promise-returning function used as the async resource fetcher. The resolved value is returned by the accessor. Synchronous reactive reads made while `fn` runs are tracked, causing the resource to rerun when those dependencies change.

#### `options`
- **Type:** `{ name?: string; initialValue?: T; deferStream?: boolean }`
- **Required:** No

Options for the resource name, initial value, and server streaming.

##### `name`
- **Type:** `string`
- **Required:** No

Name used by the resource for development debugging.

##### `initialValue`
- **Type:** `T`
- **Required:** No

Initial value returned by the accessor before the async function resolves.

##### `deferStream`
- **Type:** `boolean`
- **Default:** `false`
- **Required:** No

When `true`, streaming waits for this resource to resolve before flushing.

### Return value
- **Type:** `AccessorWithLatest<T | undefined>`

Returns an accessor for the resolved value. Before the first resolution, the accessor returns `initialValue` when provided and `undefined` otherwise.

#### `latest`
- **Type:** `T | undefined`

Getter that reads the `latest` value from the `createResource` result.

### Behavior
- Calls `createResource` internally.
- `fn` receives the previous latest value when the resource has resolved, or `undefined` while unresolved.
- The previous-value read is wrapped in `untrack`.
- The returned accessor reads the current resource value, and `latest` reads `resource.latest`.
- During hydration, `window.fetch` and `Promise` are temporarily replaced with mock implementations while `fn` runs.

### Examples
#### Basic usage
```
import { createAsync, query } from "@solidjs/router";

const getCurrentUser = query(async () => {
  const response = await fetch("/api/current-user");
  return response.json() as Promise<{ name: string }>;
}, "currentUser");

function UserProfile() {
  const user = createAsync(() => getCurrentUser());

  return <div>{user()?.name}</div>;
}
```

#### With parameter
```
import { createAsync, query } from "@solidjs/router";

type Invoice = {
  number: string;
  total: number;
};

const getInvoice = query(async (invoiceId: string) => {
  const response = await fetch(`/api/invoices/${invoiceId}`);
  return response.json() as Promise<Invoice>;
}, "invoice");

function InvoiceDetails(props: { invoiceId: string }) {
  const invoice = createAsync(() => getInvoice(props.invoiceId));

  return (
    <div>
      <h2>Invoice #{invoice()?.number}</h2>
      <p>Total: ${invoice()?.total}</p>
    </div>
  );
}
```

#### With Suspense and ErrorBoundary
```
import { ErrorBoundary, For, Suspense } from "solid-js";
import { createAsync, query } from "@solidjs/router";

type Recipe = {
  name: string;
  time: string;
};

const getRecipes = query(async () => {
  const response = await fetch("/api/recipes");
  return response.json() as Promise<Recipe[]>;
}, "recipes");

function Recipes() {
  const recipes = createAsync(() => getRecipes());

  return (
    <ErrorBoundary fallback={<p>Couldn't fetch any recipes.</p>}>
      <Suspense fallback={<p>Fetching recipes...</p>}>
        <For each={recipes()}>
          {(recipe) => (
            <div>
              <h3>{recipe.name}</h3>
              <p>Cook time: {recipe.time}</p>
            </div>
          )}
        </For>
      </Suspense>
    </ErrorBoundary>
  );
}
```

### Related
- `query`
- `createAsyncStore`
- `<Suspense>`
- `<ErrorBoundary>`
```

--------------------------------

### Basic usage of MemoryRouter

Source: https://docs.solidjs.com/solid-router/reference/components/memory-router

Example showing how to use MemoryRouter with a custom memory history and two routes.

```tsx
import { MemoryRouter, Route, createMemoryHistory } from "@solidjs/router";


export default function App() {
  const history = createMemoryHistory();


  return (
    <MemoryRouter history={history}>
      <Route path="/" component={() => <h1>Home</h1>} />
      <Route path="/about" component={() => <h1>About</h1>} />
    </MemoryRouter>
  );
}
```

--------------------------------

### Function href example

Source: https://docs.solidjs.com/solid-router/reference/components/navigate

Shows using a function for href that returns a path based on the current location.

```jsx
import { Navigate, Route, Router } from "@solidjs/router";


function getPath({ location }) {
  return location.pathname === "/old" ? "/new" : "/";
}


export default function App() {
  return (
    <Router>
      <Route path="/old" component={() => <Navigate href={getPath} />} />
    </Router>
  );
}
```

--------------------------------

### useAction

Source: https://docs.solidjs.com/solid-router/reference/data-apis/use-action

Documentation for the useAction function from @solidjs/router, including its signature, parameters, return type, behavior, and a basic usage example.

```APIDOC
## useAction

### Description
Returns a function that calls an `action` with the current router context. It is the programmatic caller for non-form submissions.

### Signature
```typescript
function useAction<T extends Array<any>, U, V>(
  action: Action<T, U, V>
): (...args: Parameters<Action<T, U, V>>) => Promise<NarrowResponse<U>>;
```

### Parameters
- **action** (`Action<T, U, V>`) - Required - The `Action` to bind to the current router.

### Return Value
- **Type:** `(...args: Parameters<Action<T, U, V>>) => Promise<NarrowResponse<U>>`
- Returns a router-bound caller with the same arguments as `action`.

### Behavior
- Unlike native form submissions, calls made with `useAction` depend on client-side JavaScript.

### Example
```tsx
import { action, useAction } from "@solidjs/router";

const likePost = action(async (id: string) => {
  return id;
}, "likePost");

function LikeButton(props: { id: string }) {
  const like = useAction(likePost);

  return <button onClick={() => like(props.id)}>Like</button>;
}
```
```

--------------------------------

### Basic usage of useLocation

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-location

Example component using useLocation to read query parameters and display them.

```typescript
import { useLocation } from "@solidjs/router";


function ProductFilter() {
  const location = useLocation();


  const category = () => location.query.category || "all";
  const page = () => location.query.page || "1";


  return (
    <div>
      <p>
        Filtering by: {category()}, Page {page()}
      </p>
    </div>
  );
}
```

--------------------------------

### useBeforeLeave

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-before-leave

Documentation for the useBeforeLeave hook from @solidjs/router, including its type signature, parameters, return value, behavior, and an example.

```APIDOC
## useBeforeLeave

### Description
Registers a listener that will be called prior to leaving the current location.

### Import
```
import { useBeforeLeave } from "@solidjs/router";
```

### Type
```
interface BeforeLeaveEventArgs {
  from: Location;
  to: string | number;
  options?: Partial<NavigateOptions>;
  readonly defaultPrevented: boolean;
  preventDefault(): void;
  retry(force?: boolean): void;
}

function useBeforeLeave(listener: (event: BeforeLeaveEventArgs) => void): void;
```

### Parameters
- **listener** (`(event: BeforeLeaveEventArgs) => void`) - Required - Function called before navigation leaves the current location.

#### Listener Event Fields
- **from** (`Location`) - Current location before the change.
- **to** (`string | number`) - Target passed to `navigate`.
- **options** (`Partial<NavigateOptions> | undefined`) - Options passed to `navigate`. Default: `undefined`.
- **preventDefault** (`() => void`) - Blocks the route change.
- **defaultPrevented** (`readonly boolean`) - `true` after this handler or an earlier leave handler calls `preventDefault()`. Default: `false`.
- **retry** (`(force?: boolean) => void`) - Retries the same navigation. Pass `true` to skip running leave handlers again.

### Return Value
- **Type:** `void` - `useBeforeLeave` does not return a value.

### Behavior
- The subscription is tied to the current owner and is removed during cleanup.
- The event contains the current location in `from`, the next target in `to`, and navigation options in `options`.
- Calling `event.preventDefault()` sets `event.defaultPrevented` and blocks the current navigation.
- Calling `event.retry(true)` retries the same navigation and skips the before-leave lifecycle for that retry.

### Example
```
import { useBeforeLeave } from "@solidjs/router";

function Editor(props: { isDirty: () => boolean }) {
  useBeforeLeave((event) => {
    if (props.isDirty() && !event.defaultPrevented) {
      event.preventDefault();
    }
  });

  return <form>{/* fields */}</form>;
}
```
```

--------------------------------

### Basic usage of useSubmissions

Source: https://docs.solidjs.com/solid-router/reference/data-apis/use-submissions

Example showing how to use useSubmissions to display and manage submissions for an action, including pending and error states.

```jsx
import { For, Show } from "solid-js";
import { action, useSubmissions } from "@solidjs/router";


const addTodoAction = action(async (formData: FormData) => {
  // ... Sends the todo data to the server.
}, "addTodo");


function AddTodoForm() {
  const submissions = useSubmissions(addTodoAction);


  return (
    <div>
      <form action={addTodoAction} method="post">
        <input name="name" />
        <button type="submit">Add</button>
      </form>
      <For each={submissions}>
        {(submission) => (
          <div>
            <span>Adding "{submission.input[0].get("name")?.toString()}"</span>
            <Show when={submission.pending}>
              <span> (pending...)</span>
            </Show>
            <Show when={submission.result?.ok}>
              <span> (completed)</span>
            </Show>
            <Show when={!submission.result?.ok}>
              <span>{` (Error: ${submission.result?.message})`}</span>
              <button onClick={() => submission.retry()}>Retry</button>
            </Show>
          </div>
        )}
      </For>
    </div>
  );
}
```

--------------------------------

### Basic usage of query

Source: https://docs.solidjs.com/solid-router/reference/data-apis/query

Example of wrapping an asynchronous function with query to cache user profile data.

```typescript

import { query } from "@solidjs/router";


const getUserProfile = query(async (userId: string) => {
  const response = await fetch(`/api/users/${encodeURIComponent(userId)}`);
  const json = await response.json();


  if (!response.ok) {
    throw new Error(json?.message ?? "Failed to load user profile.");
  }


  return json as { name: string };
}, "userProfile");


const key = getUserProfile.keyFor("123");
```

--------------------------------

### Basic Usage Example

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-resolved-path

Creates a SettingsLink component that resolves the 'settings' path relative to the current route and uses it as the href for a Link component. The fallback to an empty string handles the case where the path cannot be resolved.

```tsx
import { A, useResolvedPath } from "@solidjs/router";


function SettingsLink() {
  const settingsPath = useResolvedPath(() => "settings");


  return <A href={settingsPath() || ""}>Settings</A>;
}
```

--------------------------------

### preload

Source: https://docs.solidjs.com/solid-router/reference/preload-functions/preload

Documentation for the `preload` route property in Solid Router, including its type signature, parameters, return value, behavior, and an example usage.

```APIDOC
## preload

### Description
`preload` is a `Route` property for preparing route data before the route component renders or while a route is being preloaded.

### Type
```typescript
type Intent = "initial" | "native" | "navigate" | "preload";

interface RoutePreloadFuncArgs {
  params: Params;
  location: Location;
  intent: Intent;
}

type RoutePreloadFunc<T = unknown> = (args: RoutePreloadFuncArgs) => T;
```

### Parameters
- **params** (`Params`) - Required - Route params for the matched route. The value has the same shape as `useParams`.
- **location** (`Location`) - Required - `Location` for the route being loaded or preloaded.
- **intent** (`"initial" | "native" | "navigate" | "preload"`) - Required - Reason the router called the preload function, such as initial render, router navigation, native history navigation, or route preloading.

### Return Value
- **Type:** `T` - Returns the route data value. During route context creation, Solid Router passes this value to the matched route component as `props.data`.

### Behavior
- During route context creation, Solid Router calls `preload` with the matched params, current location, and current router intent or `"initial"`.
- Manual route preloading calls `preload` with `intent: "preload"` only when `preloadData` is truthy.
- If a route definition has no `preload`, Solid Router uses the deprecated `load` property when one is present.
- The route component's static `preload` method runs before the route-level `preload` function.

### Example
```typescript
import { Route, query } from "@solidjs/router";

const getProduct = query(async (id: string) => {
  const response = await fetch(`/api/products/${id}`);
  return response.json();
}, "product");

function preloadProduct({ params }) {
  void getProduct(params.id);
}

function ProductPage(props) {
  return <h1>Product {props.params.id}</h1>;
}

export default function ProductRoutes() {
  return (
    <Route
      path="/products/:id"
      component={ProductPage}
      preload={preloadProduct}
    />
  );
}
```
```

--------------------------------

### Basic <A> component navigation

Source: https://docs.solidjs.com/solid-router/concepts/navigation

Use the <A> component to create links that automatically apply the base URL and support relative paths. The example shows an absolute link to "/" and a relative link "users" that, from /dashboard, resolves to /dashboard/users.

```jsx
import { A } from "@solidjs/router";


function DashboardPage() {
  return (
    <main>
      <nav>
        <A href="/">Home</A>
      </nav>
      {/* This is a relative path that, from /dashboard, links to /dashboard/users */}
      <A href="users">Users</A>
    </main>
  );
}

```

--------------------------------

### Manual revalidation with query.key and query.keyFor

Source: https://docs.solidjs.com/solid-router/data-fetching/revalidation

Shows how to use `revalidate` with `query.key` to revalidate all instances of a query and `query.keyFor` to revalidate a specific query instance. The example defines two queries (`getProjectsQuery` and `getProjectTasksQuery`) and uses them in components with `createAsync`. The `refetchAllTasks` function revalidates all tasks, while `refetchTasks` revalidates tasks for a specific project.

```tsx
import { For } from "solid-js";
import { query, createAsync, revalidate } from "@solidjs/router";


const getProjectsQuery = query(async () => {
  // ... Fetches a list of projects.
}, "projects");


const getProjectTasksQuery = query(async (projectId: string) => {
  // ... Fetches a list of tasks for a project.
}, "projectTasks");


function Projects() {
  const projects = createAsync(() => getProjectsQuery());


  function refetchAllTasks() {
    revalidate(getProjectTasksQuery.key);
  }


  return (
    <div>
      <button onClick={refetchAllTasks}>Refetch all tasks</button>
      <For each={projects()}>{(project) => <Project id={project.id} />}</For>
    </div>
  );
}


function Project(props: { id: string }) {
  const tasks = createAsync(() => getProjectTasksQuery(props.id));


  function refetchTasks() {
    revalidate(getProjectTasksQuery.keyFor(props.id));
  }


  return (
    <div>
      <button onClick={refetchTasks}>Refetch tasks for this project</button>
      <For each={tasks()}>{(task) => <div>{task.title}</div>}</For>
    </div>
  );
}
```

--------------------------------

### Reading and writing cache entries

Source: https://docs.solidjs.com/solid-router/reference/data-apis/query

Demonstrates how to manually set, get, and delete cache entries using the query namespace methods.

```typescript

const key = getUserProfile.keyFor("123");


query.set(key, { name: "Ada" });
const cached = query.get(key);


query.delete(key);
```

--------------------------------

### Basic usage of reload in an action

Source: https://docs.solidjs.com/solid-router/reference/response-helpers/reload

Basic usage example showing how to use reload inside an action to revalidate a specific query after saving preferences.

```javascript
import { action, reload } from "@solidjs/router";


const savePreferencesAction = action(async () => {
  // ... Saves the user preferences.


  // Only revalidate the "userPreferences" query.
  return reload({ revalidate: ["userPreferences"] });
}, "savePreferences");
```

--------------------------------

### Basic usage of useMatch

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-match

Example of using useMatch to create a NavLink component that adds an 'active' class when the current pathname matches the href.

```tsx
import { useMatch } from "@solidjs/router";
import { type JSXElement } from "solid-js";


type NavLinkProps = {
  href: string;
  children: JSXElement;
};


function NavLink(props: NavLinkProps) {
  const match = useMatch(() => props.href);


  return (
    <a href={props.href} classList={{ active: Boolean(match()) }}>
      {props.children}
    </a>
  );
}
```

--------------------------------

### Programmatic navigation with useNavigate

Source: https://docs.solidjs.com/solid-router/concepts/navigation

Programmatically navigate to a route using the useNavigate primitive. The example redirects to /dashboard after login; replace: true removes the login page from history, preventing back navigation.

```jsx
import { useNavigate } from "@solidjs/router";


function LoginPage() {
  const navigate = useNavigate();


  return (
    <button
      onClick={() => {
        // Login logic
        navigate("/dashboard", { replace: true });
      }}
    >
      Login
    </button>
  );
}

```

--------------------------------

### Basic usage of useSubmission with action

Source: https://docs.solidjs.com/solid-router/reference/data-apis/use-submission

Example demonstrating how to use useSubmission with an action to show a pending state in a form. It imports Show, action, and useSubmission, defines an action, and uses the submission's pending property to display 'Saving...'.

```tsx
import { Show } from "solid-js";
import { action, useSubmission } from "@solidjs/router";


const addTodo = action(async (data: URLSearchParams) => {
  return data.get("title")?.toString();
}, "addTodo");


function TodoForm() {
  const submission = useSubmission(addTodo);


  return (
    <form action={addTodo} method="post">
      <input name="title" />
      <button>Add todo</button>
      <Show when={submission.pending}>Saving...</Show>
    </form>
  );
}
```

--------------------------------

### Basic usage with createMemo

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-params

Example of using useParams inside a component to access route parameters and create a derived memo that updates when the parameter changes.

```javascript
import { createMemo } from "solid-js";
import { useParams } from "@solidjs/router";


// Rendered via <Route path="/users/:id" component={UserPage} />
function UserPage() {
  const params = useParams();


  // Derived value updates when the route parameter changes.
  const title = createMemo(() => `Profile for ${params.id}`);


  return <h1>{title()}</h1>;
}
```

--------------------------------

### Define multiple routes with JSX in Solid Router

Source: https://docs.solidjs.com/solid-router/getting-started/component

Defines multiple routes in Solid Router using JSX. This example adds three routes: the root path "/" renders the Home page, "/hello-world" renders an h1 element, and "/about" renders the About component.

```jsx
import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";


import Home from "./routes/index.jsx";
import About from "./routes/about.jsx";


render(
  () => (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/hello-world" component={() => <h1>Hello World!</h1>} />
      <Route path="/about" component={About} />
    </Router>
  ),
  document.getElementById("app")
);
```

--------------------------------

### createMemoryHistory Function

Source: https://docs.solidjs.com/solid-router/reference/components/memory-router

createMemoryHistory creates a memory history object that tracks navigation state in memory, starting at path "/" with index 0, and provides methods to get, set, go, and listen to location changes.

```APIDOC
## createMemoryHistory

### Description
Creates a memory history object that keeps the router location in memory instead of the browser address bar. The history starts with `"/"` at index `0`.

### Signature
```
function createMemoryHistory(): MemoryHistory & {
  back: () => void;
  forward: () => void;
}
```

### Return Value
Returns a `MemoryHistory` object with additional `back` and `forward` methods.

### MemoryHistory Type
```
type MemoryHistory = {
  get: () => string;
  set: (change: LocationChange) => void;
  go: (delta: number) => void;
  listen: (listener: (value: string) => void) => () => void;
};
```

### Methods
- **get** () - Returns the current location string.
- **set** ({ replace, value, ... }) - Sets the current history entry. When `replace` is truthy, replaces the current entry; otherwise, removes entries after the current index and appends the new value.
- **go** (delta: number) - Moves the history index by the delta, clamping between the first and last entries.
- **listen** (listener: (value: string) => void) - Registers a listener for location changes. Returns a cleanup function that removes the listener.
- **back** () - Moves to the previous history entry (equivalent to `go(-1)`).
- **forward** () - Moves to the next history entry (equivalent to `go(1)`).

### Behavior
- `history.set` replaces the current entry when `replace` is truthy. Otherwise, it removes entries after the current index and appends the next value.
- `history.go` clamps the next index to be between the first and last history entries.
- `history.listen` registers a listener and returns a cleanup function that removes it.
```

--------------------------------

### Render Router component in Solid app

Source: https://docs.solidjs.com/solid-router/getting-started/installation-and-setup

Sets up the router by rendering the Router component. Requires a wrapper element with id "app" in the HTML; throws an error if it is not found.

```jsx
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";


const wrapper = document.getElementById("app");


if (!wrapper) {
  throw new Error("Wrapper div not found");
}


render(() => <Router />, wrapper);
```

--------------------------------

### Basic usage of preload with query

Source: https://docs.solidjs.com/solid-router/reference/preload-functions/preload

Shows how to define a `preload` function that fetches product data using `query` and passes it to a route component.

```tsx
import { Route, query } from "@solidjs/router";


const getProduct = query(async (id: string) => {
  const response = await fetch(`/api/products/${id}`);
  return response.json();
}, "product");


function preloadProduct({ params }) {
  void getProduct(params.id);
}


function ProductPage(props) {
  return <h1>Product {props.params.id}</h1>;
}


export default function ProductRoutes() {
  return (
    <Route
      path="/products/:id"
      component={ProductPage}
      preload={preloadProduct}
    />
  );
}
```

--------------------------------

### Invalidating Data After a Mutation

Source: https://docs.solidjs.com/solid-router/reference/response-helpers/json

Example of using json to revalidate a specific query after a mutation.

```APIDOC
import { For } from "solid-js";
import { query, action, json, createAsync } from "@solidjs/router";

const getCurrentUserQuery = query(async () => {
  return await fetch("/api/me").then((response) => response.json());
}, "currentUser");

const getPostsQuery = query(async () => {
  return await fetch("/api/posts").then((response) => response.json());
}, "posts");

const createPostAction = action(async (formData: FormData) => {
  const title = formData.get("title")?.toString();
  const newPost = await fetch("/api/posts", {
    method: "POST",
    body: JSON.stringify({ title }),
  }).then((response) => response.json());

  // Only revalidate the "posts" query.
  return json(newPost, { revalidate: "posts" });
}, "createPost");

function Posts() {
  const currentUser = createAsync(() => getCurrentUserQuery());
  const posts = createAsync(() => getPostsQuery());

  return (
    <div>
      <p>Welcome back {currentUser()?.name}</p>
      <ul>
        <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
      </ul>
      <form action={createPostAction} method="post">
        <input name="title" />
        <button>Create Post</button>
      </form>
    </div>
  );
}
```

--------------------------------

### Using createAsync with Suspense and ErrorBoundary

Source: https://docs.solidjs.com/solid-router/reference/data-apis/create-async

Fetches a list of recipes and displays them with loading and error fallbacks. Uses ErrorBoundary for fetch failures and Suspense for loading state.

```tsx
import { ErrorBoundary, For, Suspense } from "solid-js";
import { createAsync, query } from "@solidjs/router";


type Recipe = {
  name: string;
  time: string;
};


const getRecipes = query(async () => {
  const response = await fetch("/api/recipes");
  return response.json() as Promise<Recipe[]>;
}, "recipes");


function Recipes() {
  const recipes = createAsync(() => getRecipes());


  return (
    <ErrorBoundary fallback={<p>Couldn't fetch any recipes.</p>}>
      <Suspense fallback={<p>Fetching recipes...</p>}>
        <For each={recipes()}>
          {(recipe) => (
            <div>
              <h3>{recipe.name}</h3>
              <p>Cook time: {recipe.time}</p>
            </div>
          )}
        </For>
      </Suspense>
    </ErrorBoundary>
  );
}
```

--------------------------------

### Import usePreloadRoute

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-preload-route

Import the usePreloadRoute hook from the Solid Router package.

```javascript
import { usePreloadRoute } from "@solidjs/router";
```

--------------------------------

### useMatch with filters

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-match

Example of using useMatch with matchFilters to restrict path parameters to allowed values and a regex pattern.

```tsx
import { useMatch } from "@solidjs/router";
import { Show } from "solid-js";


function BlogPost() {
  const match = useMatch(() => "/:lang?/blog/:slug", {
    lang: ["en", "es", "fr"],
    slug: /^[a-z0-9-]+$/, // Only allow lowercase letters, numbers, and hyphens
  });


  const lang = () => match()?.params.lang || "en";


  return (
    <Show when={match()}>
      <article lang={lang()}>
        <p>Blog slug: {match()?.params.slug}</p>
      </article>
    </Show>
  );
}
```

--------------------------------

### Use a query with createAsync in a component

Source: https://docs.solidjs.com/solid-router/data-fetching/queries

Shows how to use a query with `createAsync` to fetch data and render it with Solid's `<Show>` and `<For>` components. The query is defined but not executed until called.

```TSX
import { For, Show } from "solid-js";
import { query, createAsync } from "@solidjs/router";


const getArticlesQuery = query(async () => {
  // ... Fetches a list of articles from an API.
}, "articles");


function Articles() {
  const articles = createAsync(() => getArticlesQuery());


  return (
    <Show when={articles()}>
      <For each={articles()}>{(article) => <p>{article.title}</p>}</For>
    </Show>
  );
}
```

--------------------------------

### Import useIsRouting

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-is-routing

Imports the useIsRouting hook from the Solid Router package.

```javascript
import { useIsRouting } from "@solidjs/router";
```

--------------------------------

### useCurrentMatches

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-current-matches

Documentation for the useCurrentMatches hook from @solidjs/router, including its type signature, parameters, return value, behavior, and a basic usage example.

```APIDOC
## useCurrentMatches

### Description
Returns the route matches for the current location.

### Import
```
import { useCurrentMatches } from "@solidjs/router";
```

### Type
```
interface RouteMatch extends PathMatch {
  route: RouteDescription;
}

function useCurrentMatches(): () => RouteMatch[];
```

### Parameters
`useCurrentMatches` takes no arguments.

### Return value
- **Type:** `() => RouteMatch[]`

Returns the route matches accessor.

### Behavior
- Matches are computed from route branches and the current pathname, after applying `transformUrl` when configured.
- The accessor updates when the current location changes.

### Examples
#### Basic usage
```
import { createMemo } from "solid-js";
import { useCurrentMatches } from "@solidjs/router";

function Breadcrumbs() {
  const matches = useCurrentMatches();
  const breadcrumbs = createMemo(() =>
    matches().map((match) => match.route.info?.breadcrumb)
  );

  return <>{breadcrumbs().join(" / ")}</>;
}
```
```

--------------------------------

### Basic usage of useCurrentMatches

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-current-matches

Example of using useCurrentMatches to build a breadcrumb component that displays the current route's breadcrumb trail.

```tsx
import { createMemo } from "solid-js";
import { useCurrentMatches } from "@solidjs/router";


function Breadcrumbs() {
  const matches = useCurrentMatches();
  const breadcrumbs = createMemo(() =>
    matches().map((match) => match.route.info?.breadcrumb)
  );


  return <>{breadcrumbs().join(" / ")}</>;
}
```

--------------------------------

### createAsyncStore(fn, options?)

Source: https://docs.solidjs.com/solid-router/reference/data-apis/create-async-store

Creates an async store from a promise-returning function. Returns a store-backed accessor that provides the resolved value.

```APIDOC
## createAsyncStore(fn, options?)

### Description
Creates an async store that resolves the provided promise-returning function and stores the result in a store-based accessor. It tracks reactive reads made by the function and re-runs when dependencies change.

### Function Signature
```
function createAsyncStore<T>(
  fn: (prev: T) => Promise<T>,
  options: {
    name?: string;
    initialValue: T;
    deferStream?: boolean;
    reconcile?: ReconcileOptions;
  }
): AccessorWithLatest<T>;

function createAsyncStore<T>(
  fn: (prev: T | undefined) => Promise<T>,
  options?: {
    name?: string;
    initialValue?: T;
    deferStream?: boolean;
    reconcile?: ReconcileOptions;
  }
): AccessorWithLatest<T | undefined>;
```

### Parameters
#### `fn`
- **Type:** `(prev: T | undefined) => Promise<T>`
- **Required:** Yes  
  Promise-returning function used as the async resource fetcher. The resolved value is stored in the returned store-backed accessor. Synchronous reactive reads made while `fn` runs are tracked, causing the resource to rerun when those dependencies change.

#### `options`
- **Type:** `{ name?: string; initialValue?: T; deferStream?: boolean; reconcile?: ReconcileOptions }`
- **Default:** `{}`
- **Required:** No  
  Options for the resource name, initial store value, server streaming, and store reconciliation.

##### `name`
- **Type:** `string`
- **Required:** No  
  Name used by the resource for development debugging.

##### `initialValue`
- **Type:** `T`
- **Required:** No  
  Initial store value returned by the accessor before the async function resolves.

##### `deferStream`
- **Type:** `boolean`
- **Default:** `false`
- **Required:** No  
  If `true`, streaming waits for this resource to resolve before flushing.

##### `reconcile`
- **Type:** `ReconcileOptions`
- **Required:** No  
  Options passed to `reconcile`. These options control how resolved values are merged into the existing store.

### Return Value
- **Type:** `AccessorWithLatest<T | undefined>`  
  Returns an accessor for the resolved store value. Before the first resolution, the accessor returns `initialValue` when provided and `undefined` otherwise.

#### `latest`
- **Type:** `T | undefined`  
  Getter that reads the `latest` value from the `createResource` result.

### Behavior
- Calls `createResource` with store-backed storage created by `createStore`.
- `fn` receives `unwrap(resource.latest)` when the resource has resolved, or `undefined` while unresolved.
- Initial store storage is created from `structuredClone(initialValue)`.
- Resolved values are cloned with `structuredClone` and merged with `reconcile`.
- The `reconcile` option is passed to `reconcile` when store writes run.
- The returned accessor reads the current store-backed resource value.
- During hydration, `window.fetch` and `Promise` are temporarily replaced with mock implementations while `fn` runs.

```

--------------------------------

### Prefilled arguments with action.with

Source: https://docs.solidjs.com/solid-router/reference/data-apis/action

Creates an action that takes a userId and form data, and uses `with` to prefill the userId in the form action.

```tsx
import { action } from "@solidjs/router";


const addTodo = action(async (userId: string, data: URLSearchParams) => {
  return {
    userId,
    title: data.get("title")?.toString(),
  };
}, "addTodo");


function TodoForm(props: { userId: string }) {
  return (
    <form action={addTodo.with(props.userId)} method="post">
      <input name="title" />
      <button>Add todo</button>
    </form>
  );
}
```

--------------------------------

### Filtering submissions with useSubmissions

Source: https://docs.solidjs.com/solid-router/reference/data-apis/use-submissions

Example showing how to filter submissions using a filter function that checks the input, and display only those that failed client-side validation.

```jsx
import { useSubmissions } from "@solidjs/router";


const addTodoAction = action(async (formData: FormData) => {
  // ... Sends the todo data to the server.
}, "addTodo");


function FailedTodos() {
  const failedSubmissions = useSubmissions(
    addTodoAction,
    ([formData]: [FormData]) => {
      // Filters for submissions that failed a client-side validation
      const name = formData.get("name")?.toString() ?? "";
      return name.length <= 2;
    }
  );


  return (
    <div>
      <p>Failed submissions:</p>
      <For each={failedSubmissions}>
        {(submission) => (
          <div>
            <span>{submission.input[0].get("name")?.toString()}</span>
            <button onClick={() => submission.retry()}>Retry</button>
          </div>
        )}
      </For>
    </div>
  );
}
```

--------------------------------

### Import useParams

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-params

Import the useParams hook from @solidjs/router.

```javascript
import { useParams } from "@solidjs/router";
```

--------------------------------

### useIsRouting

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-is-routing

Returns an accessor for whether a route transition is in progress. The accessor becomes true when a transition starts and false after the active transition finishes.

```APIDOC
## useIsRouting

### Description
Returns an accessor for whether a route transition is in progress. The accessor becomes `true` when a transition target starts and `false` after the active transition finishes.

### Function Signature
```typescript
function useIsRouting(): () => boolean;
```

### Parameters
None.

### Return Value
- **Type:** `() => boolean` - An accessor that reads the current route transition state.

### Behavior
The accessor returns `true` if a route transition is in progress, `false` otherwise. It starts `true` when a transition begins and becomes `false` after the transition completes.

### Example
```jsx
import { Show } from "solid-js";
import { useIsRouting } from "@solidjs/router";

function PendingRoute() {
  const isRouting = useIsRouting();
  return <Show when={isRouting()}>Loading route...</Show>;
}
```
```

--------------------------------

### Import createAsyncStore from @solidjs/router

Source: https://docs.solidjs.com/solid-router/reference/data-apis/create-async-store

Import statement for the createAsyncStore function.

```typescript
import { createAsyncStore } from "@solidjs/router";
```

--------------------------------

### Import useNavigate from @solidjs/router

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-navigate

Imports the useNavigate hook from the @solidjs/router package.

```typescript
import { useNavigate } from "@solidjs/router";
```

--------------------------------

### useMatch with custom filter functions

Source: https://docs.solidjs.com/solid-router/reference/primitives/use-match

Example of using useMatch with a custom filter function for the 'name' parameter, requiring a length greater than 5 and ending with '.html'.

```tsx
import { useMatch } from "@solidjs/router";


function FileInfo() {
  const match = useMatch(() => "/files/:type/:name", {
    type: ["images", "documents", "videos"],
    name: (name) => name.length > 5 && name.endsWith(".html"),
  });


  return <div>File: {match()?.params.name}</div>;
}
```

--------------------------------

### Import useAction

Source: https://docs.solidjs.com/solid-router/reference/data-apis/use-action

Import the useAction hook from the Solid Router package.

```typescript
import { useAction } from "@solidjs/router";
```

--------------------------------

### Route Component

Source: https://docs.solidjs.com/solid-router/reference/components/route

The Route component creates a route definition. It describes a path segment, the component for the match, route data setup, metadata, and nested child routes.

```APIDOC
## Route Component

### Description
The `Route` component creates a route definition. It describes a path segment, the component for the match, route data setup, metadata, and nested child routes.

### Import
```
import { Route } from "@solidjs/router";
```

### Type
```
type RouteProps<S extends string, T = unknown> = {
  path?: S | S[];
  children?: JSX.Element;
  preload?: RoutePreloadFunc<T>;
  matchFilters?: MatchFilters<S>;
  component?: Component<RouteSectionProps<T>>;
  info?: Record<string, any>;
  load?: RoutePreloadFunc<T>;
};

function Route<S extends string, T = unknown>(
  props: RouteProps<S, T>
): JSX.Element;
```

### Props
#### `path`
- **Type:** `S | S[]`
- **Optional:** Yes
- **Description:** Path segment or path segments matched by the route.

#### `children`
- **Type:** `JSX.Element`
- **Optional:** Yes
- **Description:** Nested route definitions below this segment.

#### `preload`
- **Type:** `RoutePreloadFunc<T>`
- **Optional:** Yes
- **Description:** Function called for route preloading and route data setup.

#### `matchFilters`
- **Type:** `MatchFilters<S>`
- **Optional:** Yes
- **Description:** Additional constraints for path parameter matching.

#### `component`
- **Type:** `Component<RouteSectionProps<T>>`
- **Optional:** Yes
- **Description:** Component rendered for this route match.

#### `info`
- **Type:** `Record<string, any>`
- **Optional:** Yes
- **Description:** Route metadata stored on the route definition.

#### `load`
- **Type:** `RoutePreloadFunc<T>`
- **Optional:** Yes
- **Description:** Deprecated alias for `preload`.

### Behavior
- Resolves `children` and returns the route props as a route definition object.
- When route branches are created, `preload` is used for route preloading. If `preload` is absent, `load` is used.
- Array `path` values create one route description per path.

### Example
```
import { Route, Router } from "@solidjs/router";

function Home() {
  return <h1>Home</h1>;
}

export default function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
    </Router>
  );
}
```

### Related
- `Router`
- `preload`
```

--------------------------------

### Accessing parameters with useParams

Source: https://docs.solidjs.com/solid-router/concepts/path-parameters

Imports `useParams` from `@solidjs/router` to retrieve captured parameters. The example shows accessing `params.id` and rendering it, with an output comment showing `User ID: 123`.

```tsx
import { useParams } from "@solidjs/router";


function User() {
  const params = useParams();
  return <div>User ID: {params.id}</div>;
  {
    /* Output: User ID: 123 */
  }
}
```

--------------------------------

### Import HashRouter

Source: https://docs.solidjs.com/solid-router/reference/components/hash-router

Import the HashRouter component from the @solidjs/router package.

```tsx
import { HashRouter } from "@solidjs/router";
```
Tokens:
Raw