# Hooks (/themes/sdk/reference/routing/hooks)

```ts
import { … } from '@poltura/theme-sdk/routing';
```

## `useRouter` [#userouter]

The router, for moving the visitor from code.

```ts
useRouter(): Router
```

**Returns:** The navigation actions.

**Example**

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

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

## `usePathname` [#usepathname]

The path of the current page.

```ts
usePathname(): string
```

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

**Example**

```tsx
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` [#usesearchparams]

The query string of the current page.

```ts
useSearchParams(): URLSearchParams
```

**Returns:** The query parameters.

**Example**

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

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

## `usePageParams` [#usepageparams]

The params the current theme page's route captured.

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

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

**Example**

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

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

## `useSitePage` [#usesitepage]

The merchant's site page the current page renders.

```ts
useSitePage(): SitePage | null
```

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

**Example**

```tsx
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` [#usenotfoundpage]

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

```ts
useNotFoundPage(): NotFoundPage | null
```

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

**Example**

```tsx
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>
  );
}
```