$route

Description

Type-safe route builder.

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

Path param

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

export const homeRoute = $route.path("/").create(() => (
  <>
    <Link href="/user/:id" params={{ id: 1 }}>
      user 1
    </Link>
    <br />
    <Link href="/user/:id" params={{ id: 2 }}>
      user 2
    </Link>
  </>
));

export const userRoute = $route
  .params({ id: s.number() })
  .path((params) => `/user/${params.id}`)
  .create(({ params }) => <>id: {params.id}</>);

Optional path params

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

export const homeRoute = $route.path("/").create(() => (
  <>
    <Link href="/section">link without params</Link>
    <br />
    <Link href="/section" params={{ name: "test" }}>
      link with params
    </Link>
  </>
));

export const sectionRoute = $route
  .path("/section")
  .params({ name: s.string().optional() })
  .create(({ params }) => <>name: {params.name}</>);

Synced search params

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

export default $route
  .path("/")
  .params(
    s
      .object({
        name: s.string(),
        country: s.object({
          code: s.string(),
        }),
      })
      .deepPartial(),
  )
  .create(({ params, setParams }) => {
    return (
      <>
        <i>Look at the address bar of your browser.</i>
        <p>
          <Input
            placeholder="name"
            value={params.name ?? ""}
            onChange={(name) =>
              setParams({ ...params, name: name || undefined })
            }
          />
        </p>
        <p>
          <Input
            placeholder="country code"
            value={params.country?.code ?? ""}
            onChange={(code) =>
              setParams({
                ...params,
                country: { ...params.country, code: code || undefined },
              })
            }
          />
        </p>
      </>
    );
  });