useRouteFocus

Moves focus to the new page heading after a client-side route change.

A single-page app keeps focus on the link that was clicked, so keyboard and screen reader users stay where the old page was. useRouteFocus returns a ref for the <h1> and focuses it whenever the key you pass changes, the route in most apps.

See alsoApp Layout

Import

import { useRouteFocus } from "@wunderui/react"

Comes with WunderUI Core and Pro, in the @wunderui/react package from your plan. See the plans.

Signature

useRouteFocus<T>(routeKey: unknown): React.RefObject<T | null>

Parameters

Returns

React.RefObject<T | null>

Examples

"use client"
import { usePathname } from "next/navigation"
import { useRouteFocus } from "@wunderui/react"

export function PageTitle({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const ref = useRouteFocus<HTMLHeadingElement>(pathname)
  return <h1 ref={ref} className="text-2xl font-semibold text-foreground outline-none">{children}</h1>
}

Notes

• The first render does not move focus; only changes of the key do.
• The heading gets tabindex="-1", so it can take focus without joining the tab order.
• It scrolls the heading to the middle of the view, so a sticky navbar never covers it.
• Focus is the announcement. Do not add a live region for the same change: the two talk over each other.