$route

Description

Type-safe route builder.

With the route builder you can define and use search and path parameters with typing and validation.

You can also consume functions created with the API builder ($api) to securely exchange data with the server.

When you create a route in development mode, metadata will be automatically generated and you will have strong typing to access routes and their parameters in the Link component, the routePath function, and the RequestUrl class.

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>
      </>
    );
  });