Fejlesztőknek
Kezdj bele
Témák/Theme SDK/Modules/routing/Hooks

Hooks

Ez az oldal még csak angolul érhető el.

The hooks of @poltura/theme-sdk/routing.

Ezen az oldalon
import { … } from '@poltura/theme-sdk/routing';

useRouter

The router, for moving the visitor from code.

useRouter(): Router

Returns: The navigation actions.

Example

import { useRouter } from '@poltura/theme-sdk/routing';

export function BackButton() {
  const router = useRouter();
  return <button onClick={() => router.back()}>Back</button>;
}

usePathname

The path of the current page.

usePathname(): string

Returns: The path without the query string, such as /products.

Example

import { Link, usePathname } from '@poltura/theme-sdk/routing';

export function NavItem({ href, label }: { href: string; label: string }) {
  const current = usePathname() === href;
  return <Link href={href} aria-current={current ? 'page' : undefined}>{label}</Link>;
}

useSearchParams

The query string of the current page.

useSearchParams(): URLSearchParams

Returns: The query parameters.

Example

import { useSearchParams } from '@poltura/theme-sdk/routing';

export function Query() {
  return <span>{useSearchParams().get('q') ?? ''}</span>;
}

usePageParams

The params the current theme page's route captured.

usePageParams<T extends PageParams = PageParams>(): T

Returns: The params by name; {} for a page without any.

Example

import { usePageParams } from '@poltura/theme-sdk/routing';

export function Slug() {
  const { slug = '' } = usePageParams();
  return <code>{slug}</code>;
}

useSitePage

The merchant's site page the current page renders.

useSitePage(): SitePage | null

Returns: The page, or null outside a site page.

Example

import { Link, pageHref, useSitePage } from '@poltura/theme-sdk/routing';

export function SubPages() {
  const page = useSitePage();
  return (
    <nav>
      {page?.children.map((child) => (
        <Link key={child.path} href={pageHref(child)}>
          {child.title}
        </Link>
      ))}
    </nav>
  );
}

useNotFoundPage

The not-found page the visitor is on, for the section that draws it.

useNotFoundPage(): NotFoundPage | null

Returns: The page's wording and suggested categories, or null outside the not-found page.

Example

import { Link, useNotFoundPage } from '@poltura/theme-sdk/routing';

export function Lost() {
  const page = useNotFoundPage();
  if (!page) return null;
  return (
    <section>
      <h1>{page.texts.title}</h1>
      {page.categories.map((category) => (
        <Link key={category.id} href={category.href}>
          {category.name}
        </Link>
      ))}
    </section>
  );
}
Utoljára frissítve