$route

Import

import { $route } from "dreamkit";

Definition

declare const $route: {
  params?: (value: object) => typeof $route;
  path?: (value: string | ((params: object) => string)) => typeof $route;
  preload?: (
    value: (data: { intent: string; params: object }) => any,
  ) => typeof $route;
  create: (
    component: (utils: {
      params: object;
      setParams: (value: object) => void;
    }) => any,
  ) => typeof $route;
};

Examples

Basic usage

src/routes/users/[id].tsx

import { $route, s } from "dreamkit";

export default $route
  .params({
    name: s.string().optional(),
  })
  .create(({ params }) => {
    return (
      <ul>
        <li>name: {params.name}</li>
      </ul>
    );
  });

Advanced example

import { s, $route } from "dreamkit";
import { createResource, For } from "solid-js";

const items = Array.from({ length: 10 }).map((_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`,
}));

export default $route
  .params({ name: s.string().optional() })
  .create(({ params, setParams }) => {
    const [resource] = createResource(
      () => ({ name: params.name?.toLowerCase() }),
      (search) =>
        items.filter(
          (item) =>
            !search.name || !item.name.toLowerCase().includes(search.name),
        ),
    );
    return (
      <div>
        <input
          type="text"
          placeholder="name"
          value={params.name ?? ""}
          onInput={(event) => {
            setParams({ ...params, name: event.target.value || undefined });
          }}
        />
        <ul>
          <For each={resource()}>{(item) => <li>{item.name}</li>}</For>
        </ul>
      </div>
    );
  });

Use route config

src/routes/users/[id].tsx

import { $route, useRoute, s } from "dreamkit";

export const route = $route.params({
  name: s.string().optional(),
});

export default function User() {
  const { params } = useRoute(route);
  return (
    <ul>
      <li>name: {params.name}</li>
    </ul>
  );
}