From 443b06ea4a8b595e8d0d556f310e2012e7225fc2 Mon Sep 17 00:00:00 2001
From: Jovi De Croock <decroockjovi@gmail.com>
Date: Sun, 15 Feb 2026 18:59:06 +0100
Subject: [PATCH 1/3] Scrappy first implementation

---
 package.json                                  |   1 +
 packages/preact-router/eslint.config.ts       |  14 +
 packages/preact-router/package.json           |  74 ++
 packages/preact-router/src/Asset.tsx          | 188 ++++
 packages/preact-router/src/CatchBoundary.tsx  | 120 +++
 packages/preact-router/src/ClientOnly.tsx     |  33 +
 .../preact-router/src/HeadContent.dev.tsx     |  43 +
 packages/preact-router/src/HeadContent.tsx    |  20 +
 packages/preact-router/src/Match.tsx          | 327 +++++++
 packages/preact-router/src/Matches.tsx        | 284 ++++++
 packages/preact-router/src/RouterProvider.tsx |  87 ++
 packages/preact-router/src/SafeFragment.tsx   |   5 +
 packages/preact-router/src/ScriptOnce.tsx     |  21 +
 packages/preact-router/src/Scripts.tsx        |  80 ++
 .../preact-router/src/ScrollRestoration.tsx   |  69 ++
 packages/preact-router/src/Suspense.tsx       |  45 +
 packages/preact-router/src/Transitioner.tsx   | 125 +++
 packages/preact-router/src/awaited.tsx        |  51 ++
 packages/preact-router/src/fileRoute.ts       | 289 +++++++
 .../preact-router/src/headContentUtils.tsx    | 213 +++++
 packages/preact-router/src/history.ts         |   9 +
 packages/preact-router/src/index.dev.tsx      |   6 +
 packages/preact-router/src/index.tsx          | 360 ++++++++
 .../preact-router/src/lazyRouteComponent.tsx  |  70 ++
 packages/preact-router/src/link.tsx           | 805 ++++++++++++++++++
 packages/preact-router/src/matchContext.tsx   |   6 +
 packages/preact-router/src/not-found.tsx      |  41 +
 .../preact-router/src/renderRouteNotFound.tsx |  30 +
 packages/preact-router/src/route.tsx          | 723 ++++++++++++++++
 packages/preact-router/src/router.ts          |  79 ++
 packages/preact-router/src/routerContext.tsx  |  24 +
 .../preact-router/src/scroll-restoration.tsx  |  45 +
 packages/preact-router/src/ssr/serializer.ts  |   7 +
 .../preact-router/src/structuralSharing.ts    |  45 +
 packages/preact-router/src/typePrimitives.ts  |  84 ++
 packages/preact-router/src/useBlocker.tsx     | 321 +++++++
 packages/preact-router/src/useCanGoBack.ts    |   5 +
 packages/preact-router/src/useLoaderData.tsx  |  83 ++
 packages/preact-router/src/useLoaderDeps.tsx  |  61 ++
 packages/preact-router/src/useLocation.tsx    |  44 +
 packages/preact-router/src/useMatch.tsx       | 122 +++
 packages/preact-router/src/useNavigate.tsx    |  61 ++
 packages/preact-router/src/useParams.tsx      |  98 +++
 packages/preact-router/src/useRouteContext.ts |  30 +
 packages/preact-router/src/useRouter.tsx      |  19 +
 packages/preact-router/src/useRouterState.tsx |  75 ++
 packages/preact-router/src/useSearch.tsx      |  96 +++
 packages/preact-router/src/utils.ts           |  66 ++
 .../preact-router/tests/ClientOnly.test.tsx   |  45 +
 packages/preact-router/tests/Matches.test.tsx |  79 ++
 .../preact-router/tests/Suspense.test.tsx     | 137 +++
 packages/preact-router/tests/blocker.test.tsx |  90 ++
 packages/preact-router/tests/link.test.tsx    | 167 ++++
 packages/preact-router/tests/loaders.test.tsx | 158 ++++
 .../preact-router/tests/navigate.test.tsx     | 110 +++
 .../preact-router/tests/not-found.test.tsx    |  60 ++
 packages/preact-router/tests/router.test.tsx  | 110 +++
 packages/preact-router/tests/setupTests.tsx   |   5 +
 .../preact-router/tests/useBlocker.test.tsx   | 137 +++
 .../preact-router/tests/useCanGoBack.test.tsx |  92 ++
 .../preact-router/tests/useParams.test.tsx    | 103 +++
 packages/preact-router/tests/utils.ts         |  56 ++
 packages/preact-router/tsconfig.json          |   8 +
 packages/preact-router/tsconfig.legacy.json   |   4 +
 packages/preact-router/vite.config.ts         |  35 +
 pnpm-lock.yaml                                | 323 ++++++-
 66 files changed, 7221 insertions(+), 2 deletions(-)
 create mode 100644 packages/preact-router/eslint.config.ts
 create mode 100644 packages/preact-router/package.json
 create mode 100644 packages/preact-router/src/Asset.tsx
 create mode 100644 packages/preact-router/src/CatchBoundary.tsx
 create mode 100644 packages/preact-router/src/ClientOnly.tsx
 create mode 100644 packages/preact-router/src/HeadContent.dev.tsx
 create mode 100644 packages/preact-router/src/HeadContent.tsx
 create mode 100644 packages/preact-router/src/Match.tsx
 create mode 100644 packages/preact-router/src/Matches.tsx
 create mode 100644 packages/preact-router/src/RouterProvider.tsx
 create mode 100644 packages/preact-router/src/SafeFragment.tsx
 create mode 100644 packages/preact-router/src/ScriptOnce.tsx
 create mode 100644 packages/preact-router/src/Scripts.tsx
 create mode 100644 packages/preact-router/src/ScrollRestoration.tsx
 create mode 100644 packages/preact-router/src/Suspense.tsx
 create mode 100644 packages/preact-router/src/Transitioner.tsx
 create mode 100644 packages/preact-router/src/awaited.tsx
 create mode 100644 packages/preact-router/src/fileRoute.ts
 create mode 100644 packages/preact-router/src/headContentUtils.tsx
 create mode 100644 packages/preact-router/src/history.ts
 create mode 100644 packages/preact-router/src/index.dev.tsx
 create mode 100644 packages/preact-router/src/index.tsx
 create mode 100644 packages/preact-router/src/lazyRouteComponent.tsx
 create mode 100644 packages/preact-router/src/link.tsx
 create mode 100644 packages/preact-router/src/matchContext.tsx
 create mode 100644 packages/preact-router/src/not-found.tsx
 create mode 100644 packages/preact-router/src/renderRouteNotFound.tsx
 create mode 100644 packages/preact-router/src/route.tsx
 create mode 100644 packages/preact-router/src/router.ts
 create mode 100644 packages/preact-router/src/routerContext.tsx
 create mode 100644 packages/preact-router/src/scroll-restoration.tsx
 create mode 100644 packages/preact-router/src/ssr/serializer.ts
 create mode 100644 packages/preact-router/src/structuralSharing.ts
 create mode 100644 packages/preact-router/src/typePrimitives.ts
 create mode 100644 packages/preact-router/src/useBlocker.tsx
 create mode 100644 packages/preact-router/src/useCanGoBack.ts
 create mode 100644 packages/preact-router/src/useLoaderData.tsx
 create mode 100644 packages/preact-router/src/useLoaderDeps.tsx
 create mode 100644 packages/preact-router/src/useLocation.tsx
 create mode 100644 packages/preact-router/src/useMatch.tsx
 create mode 100644 packages/preact-router/src/useNavigate.tsx
 create mode 100644 packages/preact-router/src/useParams.tsx
 create mode 100644 packages/preact-router/src/useRouteContext.ts
 create mode 100644 packages/preact-router/src/useRouter.tsx
 create mode 100644 packages/preact-router/src/useRouterState.tsx
 create mode 100644 packages/preact-router/src/useSearch.tsx
 create mode 100644 packages/preact-router/src/utils.ts
 create mode 100644 packages/preact-router/tests/ClientOnly.test.tsx
 create mode 100644 packages/preact-router/tests/Matches.test.tsx
 create mode 100644 packages/preact-router/tests/Suspense.test.tsx
 create mode 100644 packages/preact-router/tests/blocker.test.tsx
 create mode 100644 packages/preact-router/tests/link.test.tsx
 create mode 100644 packages/preact-router/tests/loaders.test.tsx
 create mode 100644 packages/preact-router/tests/navigate.test.tsx
 create mode 100644 packages/preact-router/tests/not-found.test.tsx
 create mode 100644 packages/preact-router/tests/router.test.tsx
 create mode 100644 packages/preact-router/tests/setupTests.tsx
 create mode 100644 packages/preact-router/tests/useBlocker.test.tsx
 create mode 100644 packages/preact-router/tests/useCanGoBack.test.tsx
 create mode 100644 packages/preact-router/tests/useParams.test.tsx
 create mode 100644 packages/preact-router/tests/utils.ts
 create mode 100644 packages/preact-router/tsconfig.json
 create mode 100644 packages/preact-router/tsconfig.legacy.json
 create mode 100644 packages/preact-router/vite.config.ts

diff --git a/package.json b/package.json
index c6679b70f80..21447309ef1 100644
--- a/package.json
+++ b/package.json
@@ -120,6 +120,7 @@
       "@tanstack/start-client-core": "workspace:*",
       "@tanstack/start-server-core": "workspace:*",
       "@tanstack/start-storage-context": "workspace:*",
+      "@tanstack/preact-router": "workspace:*",
       "@tanstack/vue-router": "workspace:*",
       "@tanstack/vue-router-devtools": "workspace:*",
       "@tanstack/eslint-plugin-router": "workspace:*",
diff --git a/packages/preact-router/eslint.config.ts b/packages/preact-router/eslint.config.ts
new file mode 100644
index 00000000000..108ae9cff1c
--- /dev/null
+++ b/packages/preact-router/eslint.config.ts
@@ -0,0 +1,14 @@
+import rootConfig from '../../eslint.config.js'
+
+export default [
+  ...rootConfig,
+  {
+    files: ['src/**/*.{ts,tsx}', 'tests/**/*.{ts,tsx}'],
+  },
+  {
+    rules: {
+      '@typescript-eslint/no-unnecessary-condition': 'off',
+      'no-unused-vars': 'off',
+    },
+  },
+]
diff --git a/packages/preact-router/package.json b/packages/preact-router/package.json
new file mode 100644
index 00000000000..025be04a64b
--- /dev/null
+++ b/packages/preact-router/package.json
@@ -0,0 +1,74 @@
+{
+  "name": "@tanstack/preact-router",
+  "version": "1.160.0",
+  "description": "Modern and scalable routing for Preact applications",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/router.git",
+    "directory": "packages/preact-router"
+  },
+  "homepage": "https://tanstack.com/router",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "preact",
+    "location",
+    "router",
+    "routing",
+    "async",
+    "async router",
+    "typescript"
+  ],
+  "scripts": {
+    "clean": "rimraf ./dist && rimraf ./coverage",
+    "test": "pnpm run test:unit",
+    "test:eslint": "eslint",
+    "test:types": "tsc -p tsconfig.legacy.json",
+    "test:unit": "vitest",
+    "test:unit:dev": "pnpm run test:unit --watch --hideSkippedTests",
+    "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
+    "build": "vite build"
+  },
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "development": "./dist/esm/index.dev.js",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "dependencies": {
+    "@tanstack/history": "workspace:*",
+    "@tanstack/preact-store": "^0.10.2",
+    "@tanstack/router-core": "workspace:*",
+    "isbot": "^5.1.22",
+    "tiny-invariant": "^1.3.3",
+    "tiny-warning": "^1.0.3"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.9.4",
+    "@testing-library/preact": "^3.2.4",
+    "@testing-library/jest-dom": "^6.6.3",
+    "preact": "^10.25.0"
+  },
+  "peerDependencies": {
+    "preact": "^10.0.0"
+  }
+}
diff --git a/packages/preact-router/src/Asset.tsx b/packages/preact-router/src/Asset.tsx
new file mode 100644
index 00000000000..880d65276cb
--- /dev/null
+++ b/packages/preact-router/src/Asset.tsx
@@ -0,0 +1,188 @@
+import { useEffect } from 'preact/hooks'
+import { isServer } from '@tanstack/router-core/isServer'
+import { useRouter } from './useRouter'
+import type { VNode } from 'preact'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+interface ScriptAttrs {
+  [key: string]: string | boolean | undefined
+  src?: string
+}
+
+export function Asset({
+  tag,
+  attrs,
+  children,
+  nonce,
+}: RouterManagedTag & { nonce?: string }): VNode | null {
+  switch (tag) {
+    case 'title':
+      return (
+        <title {...attrs}>
+          {children}
+        </title>
+      )
+    case 'meta':
+      return <meta {...attrs} />
+    case 'link':
+      return <link {...attrs} nonce={nonce} />
+    case 'style':
+      return (
+        <style
+          {...attrs}
+          dangerouslySetInnerHTML={{ __html: children as string }}
+          nonce={nonce}
+        />
+      )
+    case 'script':
+      return <Script attrs={attrs}>{children}</Script>
+    default:
+      return null
+  }
+}
+
+function Script({
+  attrs,
+  children,
+}: {
+  attrs?: ScriptAttrs
+  children?: string
+}) {
+  const router = useRouter()
+  const dataScript =
+    typeof attrs?.type === 'string' &&
+    attrs.type !== '' &&
+    attrs.type !== 'text/javascript' &&
+    attrs.type !== 'module'
+
+  useEffect(() => {
+    if (dataScript) return
+
+    if (attrs?.src) {
+      const normSrc = (() => {
+        try {
+          const base = document.baseURI || window.location.href
+          return new URL(attrs.src, base).href
+        } catch {
+          return attrs.src
+        }
+      })()
+      const existingScript = Array.from(
+        document.querySelectorAll('script[src]'),
+      ).find((el) => (el as HTMLScriptElement).src === normSrc)
+
+      if (existingScript) {
+        return
+      }
+
+      const script = document.createElement('script')
+
+      for (const [key, value] of Object.entries(attrs)) {
+        if (
+          key !== 'suppressHydrationWarning' &&
+          value !== undefined &&
+          value !== false
+        ) {
+          script.setAttribute(
+            key,
+            typeof value === 'boolean' ? '' : String(value),
+          )
+        }
+      }
+
+      document.head.appendChild(script)
+
+      return () => {
+        if (script.parentNode) {
+          script.parentNode.removeChild(script)
+        }
+      }
+    }
+
+    if (typeof children === 'string') {
+      const typeAttr =
+        typeof attrs?.type === 'string' ? attrs.type : 'text/javascript'
+      const nonceAttr =
+        typeof attrs?.nonce === 'string' ? attrs.nonce : undefined
+      const existingScript = Array.from(
+        document.querySelectorAll('script:not([src])'),
+      ).find((el) => {
+        if (!(el instanceof HTMLScriptElement)) return false
+        const sType = el.getAttribute('type') ?? 'text/javascript'
+        const sNonce = el.getAttribute('nonce') ?? undefined
+        return (
+          el.textContent === children &&
+          sType === typeAttr &&
+          sNonce === nonceAttr
+        )
+      })
+
+      if (existingScript) {
+        return
+      }
+
+      const script = document.createElement('script')
+      script.textContent = children
+
+      if (attrs) {
+        for (const [key, value] of Object.entries(attrs)) {
+          if (
+            key !== 'suppressHydrationWarning' &&
+            value !== undefined &&
+            value !== false
+          ) {
+            script.setAttribute(
+              key,
+              typeof value === 'boolean' ? '' : String(value),
+            )
+          }
+        }
+      }
+
+      document.head.appendChild(script)
+
+      return () => {
+        if (script.parentNode) {
+          script.parentNode.removeChild(script)
+        }
+      }
+    }
+
+    return undefined
+  }, [attrs, children, dataScript])
+
+  if (!(isServer ?? router.isServer)) {
+    if (dataScript && typeof children === 'string') {
+      return (
+        <script
+          {...attrs}
+          dangerouslySetInnerHTML={{ __html: children }}
+        />
+      )
+    }
+
+    const { src: _src, async: _async, defer: _defer, ...rest } = attrs || {}
+    // render an empty script on the client just to avoid hydration errors
+    return (
+      <script
+        dangerouslySetInnerHTML={{ __html: '' }}
+        {...rest}
+      ></script>
+    )
+  }
+
+  if (attrs?.src && typeof attrs.src === 'string') {
+    return <script {...attrs} />
+  }
+
+  if (typeof children === 'string') {
+    return (
+      <script
+        {...attrs}
+        dangerouslySetInnerHTML={{ __html: children }}
+      />
+    )
+  }
+
+  return null
+}
diff --git a/packages/preact-router/src/CatchBoundary.tsx b/packages/preact-router/src/CatchBoundary.tsx
new file mode 100644
index 00000000000..d785a1c270a
--- /dev/null
+++ b/packages/preact-router/src/CatchBoundary.tsx
@@ -0,0 +1,120 @@
+import { Component, h } from 'preact'
+import { useState } from 'preact/hooks'
+import type { ComponentChildren } from 'preact'
+import type { ErrorRouteComponent } from './route'
+
+export function CatchBoundary(props: {
+  getResetKey: () => number | string
+  children: ComponentChildren
+  errorComponent?: ErrorRouteComponent
+  onCatch?: (error: Error, errorInfo: { componentStack?: string }) => void
+}) {
+  const errorComponent = props.errorComponent ?? ErrorComponent
+
+  return (
+    <CatchBoundaryImpl
+      getResetKey={props.getResetKey}
+      onCatch={props.onCatch}
+      children={({ error, reset }) => {
+        if (error) {
+          return h(errorComponent, {
+            error,
+            reset,
+          })
+        }
+
+        return props.children
+      }}
+    />
+  )
+}
+
+class CatchBoundaryImpl extends Component<
+  {
+    getResetKey: () => number | string
+    children: (props: {
+      error: Error | null
+      reset: () => void
+    }) => ComponentChildren
+    onCatch?: (error: Error, errorInfo: { componentStack?: string }) => void
+  },
+  { error: Error | null; resetKey: string }
+> {
+  state = { error: null as Error | null, resetKey: '' }
+
+  static getDerivedStateFromProps(props: any) {
+    return { resetKey: props.getResetKey() }
+  }
+  static getDerivedStateFromError(error: Error) {
+    return { error }
+  }
+  reset() {
+    this.setState({ error: null })
+  }
+  componentDidUpdate(
+    prevProps: any,
+    prevState: any,
+  ): void {
+    if (prevState.error && prevState.resetKey !== this.state.resetKey) {
+      this.reset()
+    }
+  }
+  componentDidCatch(error: Error, errorInfo: any) {
+    if (this.props.onCatch) {
+      this.props.onCatch(error, errorInfo)
+    }
+  }
+  render() {
+    return this.props.children({
+      error:
+        this.state.resetKey !== this.props.getResetKey()
+          ? null
+          : this.state.error,
+      reset: () => {
+        this.reset()
+      },
+    })
+  }
+}
+
+export function ErrorComponent({ error }: { error: any }) {
+  const [show, setShow] = useState(process.env.NODE_ENV !== 'production')
+
+  return (
+    <div style={{ padding: '.5rem', maxWidth: '100%' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
+        <strong style={{ fontSize: '1rem' }}>Something went wrong!</strong>
+        <button
+          style={{
+            appearance: 'none',
+            fontSize: '.6em',
+            border: '1px solid currentColor',
+            padding: '.1rem .2rem',
+            fontWeight: 'bold',
+            borderRadius: '.25rem',
+          }}
+          onClick={() => setShow((d) => !d)}
+        >
+          {show ? 'Hide Error' : 'Show Error'}
+        </button>
+      </div>
+      <div style={{ height: '.25rem' }} />
+      {show ? (
+        <div>
+          <pre
+            style={{
+              fontSize: '.7em',
+              border: '1px solid red',
+              borderRadius: '.25rem',
+              padding: '.3rem',
+              color: 'red',
+              overflow: 'auto',
+            }}
+          >
+            {error.message ? <code>{error.message}</code> : null}
+          </pre>
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/packages/preact-router/src/ClientOnly.tsx b/packages/preact-router/src/ClientOnly.tsx
new file mode 100644
index 00000000000..6ff72d28bca
--- /dev/null
+++ b/packages/preact-router/src/ClientOnly.tsx
@@ -0,0 +1,33 @@
+import { Fragment } from 'preact'
+import { useState, useEffect } from 'preact/hooks'
+import type { ComponentChildren } from 'preact'
+
+export interface ClientOnlyProps {
+  children: ComponentChildren
+  fallback?: ComponentChildren
+}
+
+/**
+ * Render the children only after the JS has loaded client-side.
+ */
+export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
+  return useHydrated() ? (
+    <Fragment>{children}</Fragment>
+  ) : (
+    <Fragment>{fallback}</Fragment>
+  )
+}
+
+/**
+ * Return a boolean indicating if the JS has been hydrated already.
+ * Uses useState + useEffect since Preact doesn't have useSyncExternalStore.
+ */
+export function useHydrated(): boolean {
+  const [hydrated, setHydrated] = useState(false)
+
+  useEffect(() => {
+    setHydrated(true)
+  }, [])
+
+  return hydrated
+}
diff --git a/packages/preact-router/src/HeadContent.dev.tsx b/packages/preact-router/src/HeadContent.dev.tsx
new file mode 100644
index 00000000000..3d2fd323a49
--- /dev/null
+++ b/packages/preact-router/src/HeadContent.dev.tsx
@@ -0,0 +1,43 @@
+import { useEffect } from 'preact/hooks'
+import { Asset } from './Asset'
+import { useRouter } from './useRouter'
+import { useHydrated } from './ClientOnly'
+import { useTags } from './headContentUtils'
+
+const DEV_STYLES_ATTR = 'data-tanstack-router-dev-styles'
+
+/**
+ * Render route-managed head tags (title, meta, links, styles, head scripts).
+ * Place inside the document head of your app shell.
+ *
+ * Development version: filters out dev styles link after hydration and
+ * includes a fallback cleanup effect for hydration mismatch cases.
+ */
+export function HeadContent() {
+  const tags = useTags()
+  const router = useRouter()
+  const nonce = router.options.ssr?.nonce
+  const hydrated = useHydrated()
+
+  // Fallback cleanup for hydration mismatch cases
+  useEffect(() => {
+    if (hydrated) {
+      document
+        .querySelectorAll(`link[${DEV_STYLES_ATTR}]`)
+        .forEach((el) => el.remove())
+    }
+  }, [hydrated])
+
+  // Filter out dev styles after hydration
+  const filteredTags = hydrated
+    ? tags.filter((tag) => !tag.attrs?.[DEV_STYLES_ATTR])
+    : tags
+
+  return (
+    <>
+      {filteredTags.map((tag) => (
+        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />
+      ))}
+    </>
+  )
+}
diff --git a/packages/preact-router/src/HeadContent.tsx b/packages/preact-router/src/HeadContent.tsx
new file mode 100644
index 00000000000..e4d2b54e324
--- /dev/null
+++ b/packages/preact-router/src/HeadContent.tsx
@@ -0,0 +1,20 @@
+import { Asset } from './Asset'
+import { useRouter } from './useRouter'
+import { useTags } from './headContentUtils'
+
+/**
+ * Render route-managed head tags (title, meta, links, styles, head scripts).
+ * Place inside the document head of your app shell.
+ */
+export function HeadContent() {
+  const tags = useTags()
+  const router = useRouter()
+  const nonce = router.options.ssr?.nonce
+  return (
+    <>
+      {tags.map((tag) => (
+        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />
+      ))}
+    </>
+  )
+}
diff --git a/packages/preact-router/src/Match.tsx b/packages/preact-router/src/Match.tsx
new file mode 100644
index 00000000000..f5d101fe9e2
--- /dev/null
+++ b/packages/preact-router/src/Match.tsx
@@ -0,0 +1,327 @@
+import { h } from 'preact'
+import { useContext, useMemo, useRef } from 'preact/hooks'
+import invariant from 'tiny-invariant'
+import warning from 'tiny-warning'
+import {
+  createControlledPromise,
+  getLocationChangeInfo,
+  isNotFound,
+  isRedirect,
+  rootRouteId,
+} from '@tanstack/router-core'
+import { isServer } from '@tanstack/router-core/isServer'
+import { CatchBoundary, ErrorComponent } from './CatchBoundary'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
+import { CatchNotFound } from './not-found'
+import { matchContext } from './matchContext'
+import { SafeFragment } from './SafeFragment'
+import { Suspense } from './Suspense'
+import { renderRouteNotFound } from './renderRouteNotFound'
+import { ScrollRestoration } from './scroll-restoration'
+import { ClientOnly } from './ClientOnly'
+import type {
+  AnyRoute,
+  ParsedLocation,
+  RootRouteOptions,
+} from '@tanstack/router-core'
+
+// No React.memo in Preact without compat - just use plain function components
+export function Match({ matchId }: { matchId: string }) {
+  const router = useRouter()
+  const matchState = useRouterState({
+    select: (s) => {
+      const matchIndex = s.matches.findIndex((d) => d.id === matchId)
+      const match = s.matches[matchIndex]
+      invariant(
+        match,
+        `Could not find match for matchId "${matchId}". Please file an issue!`,
+      )
+      return {
+        routeId: match.routeId,
+        ssr: match.ssr,
+        _displayPending: match._displayPending,
+        resetKey: s.loadedAt,
+        parentRouteId: s.matches[matchIndex - 1]?.routeId as string,
+      }
+    },
+    structuralSharing: true as any,
+  })
+
+  const route: AnyRoute = router.routesById[matchState.routeId]
+
+  const PendingComponent =
+    route.options.pendingComponent ?? router.options.defaultPendingComponent
+
+  const pendingElement = PendingComponent ? <PendingComponent /> : null
+
+  const routeErrorComponent =
+    route.options.errorComponent ?? router.options.defaultErrorComponent
+
+  const routeOnCatch = route.options.onCatch ?? router.options.defaultOnCatch
+
+  const routeNotFoundComponent = route.isRoot
+    ? (route.options.notFoundComponent ??
+      router.options.notFoundRoute?.options.component)
+    : route.options.notFoundComponent
+
+  const resolvedNoSsr =
+    matchState.ssr === false || matchState.ssr === 'data-only'
+  const ResolvedSuspenseBoundary =
+    // If we're on the root route, allow forcefully wrapping in suspense
+    (!route.isRoot || route.options.wrapInSuspense || resolvedNoSsr) &&
+    (route.options.wrapInSuspense ??
+      PendingComponent ??
+      ((route.options.errorComponent as any)?.preload || resolvedNoSsr))
+      ? Suspense
+      : SafeFragment
+
+  const ResolvedCatchBoundary = routeErrorComponent
+    ? CatchBoundary
+    : SafeFragment
+
+  const ResolvedNotFoundBoundary = routeNotFoundComponent
+    ? CatchNotFound
+    : SafeFragment
+
+  const ShellComponent = route.isRoot
+    ? ((route.options as RootRouteOptions).shellComponent ?? SafeFragment)
+    : SafeFragment
+
+  return (
+    <ShellComponent>
+      <matchContext.Provider value={matchId}>
+        <ResolvedSuspenseBoundary>
+          <ResolvedCatchBoundary
+            getResetKey={() => matchState.resetKey}
+            errorComponent={routeErrorComponent || ErrorComponent}
+            onCatch={(error, errorInfo) => {
+              if (isNotFound(error)) throw error
+              warning(false, `Error in route match: ${matchId}`)
+              routeOnCatch?.(error, errorInfo)
+            }}
+          >
+            <ResolvedNotFoundBoundary
+              fallback={(error) => {
+                if (
+                  !routeNotFoundComponent ||
+                  (error.routeId && error.routeId !== matchState.routeId) ||
+                  (!error.routeId && !route.isRoot)
+                )
+                  throw error
+
+                return h(routeNotFoundComponent, error as any) as any
+              }}
+            >
+              {resolvedNoSsr || matchState._displayPending ? (
+                <ClientOnly fallback={pendingElement}>
+                  <MatchInner matchId={matchId} />
+                </ClientOnly>
+              ) : (
+                <MatchInner matchId={matchId} />
+              )}
+            </ResolvedNotFoundBoundary>
+          </ResolvedCatchBoundary>
+        </ResolvedSuspenseBoundary>
+      </matchContext.Provider>
+      {matchState.parentRouteId === rootRouteId &&
+      router.options.scrollRestoration ? (
+        <>
+          <OnRendered />
+          <ScrollRestoration />
+        </>
+      ) : null}
+    </ShellComponent>
+  )
+}
+
+function OnRendered() {
+  const router = useRouter()
+
+  const prevLocationRef = useRef<undefined | ParsedLocation<{}>>(
+    undefined,
+  )
+
+  return (
+    <script
+      key={router.latestLocation.state.__TSR_key}
+      ref={(el: HTMLScriptElement | null) => {
+        if (
+          el &&
+          (prevLocationRef.current === undefined ||
+            prevLocationRef.current.href !== router.latestLocation.href)
+        ) {
+          router.emit({
+            type: 'onRendered',
+            ...getLocationChangeInfo(router.state),
+          })
+          prevLocationRef.current = router.latestLocation
+        }
+      }}
+    />
+  )
+}
+
+export function MatchInner({
+  matchId,
+}: {
+  matchId: string
+}): any {
+  const router = useRouter()
+
+  const { match, key, routeId } = useRouterState({
+    select: (s) => {
+      const match = s.matches.find((d) => d.id === matchId)!
+      const routeId = match.routeId as string
+
+      const remountFn =
+        (router.routesById[routeId] as AnyRoute).options.remountDeps ??
+        router.options.defaultRemountDeps
+      const remountDeps = remountFn?.({
+        routeId,
+        loaderDeps: match.loaderDeps,
+        params: match._strictParams,
+        search: match._strictSearch,
+      })
+      const key = remountDeps ? JSON.stringify(remountDeps) : undefined
+
+      return {
+        key,
+        routeId,
+        match: {
+          id: match.id,
+          status: match.status,
+          error: match.error,
+          invalid: match.invalid,
+          _forcePending: match._forcePending,
+          _displayPending: match._displayPending,
+        },
+      }
+    },
+    structuralSharing: true as any,
+  })
+
+  const route = router.routesById[routeId] as AnyRoute
+
+  const out = useMemo(() => {
+    const Comp = route.options.component ?? router.options.defaultComponent
+    if (Comp) {
+      return <Comp key={key} />
+    }
+    return <Outlet />
+  }, [key, route.options.component, router.options.defaultComponent])
+
+  if (match._displayPending) {
+    throw router.getMatch(match.id)?._nonReactive.displayPendingPromise
+  }
+
+  if (match._forcePending) {
+    throw router.getMatch(match.id)?._nonReactive.minPendingPromise
+  }
+
+  if (match.status === 'pending') {
+    const pendingMinMs =
+      route.options.pendingMinMs ?? router.options.defaultPendingMinMs
+    if (pendingMinMs) {
+      const routerMatch = router.getMatch(match.id)
+      if (routerMatch && !routerMatch._nonReactive.minPendingPromise) {
+        if (!(isServer ?? router.isServer)) {
+          const minPendingPromise = createControlledPromise<void>()
+
+          routerMatch._nonReactive.minPendingPromise = minPendingPromise
+
+          setTimeout(() => {
+            minPendingPromise.resolve()
+            routerMatch._nonReactive.minPendingPromise = undefined
+          }, pendingMinMs)
+        }
+      }
+    }
+    throw router.getMatch(match.id)?._nonReactive.loadPromise
+  }
+
+  if (match.status === 'notFound') {
+    invariant(isNotFound(match.error), 'Expected a notFound error')
+    return renderRouteNotFound(router, route, match.error)
+  }
+
+  if (match.status === 'redirected') {
+    invariant(isRedirect(match.error), 'Expected a redirect error')
+    throw router.getMatch(match.id)?._nonReactive.loadPromise
+  }
+
+  if (match.status === 'error') {
+    if (isServer ?? router.isServer) {
+      const RouteErrorComponent =
+        (route.options.errorComponent ??
+          router.options.defaultErrorComponent) ||
+        ErrorComponent
+      return (
+        <RouteErrorComponent
+          error={match.error as any}
+          reset={undefined as any}
+          info={{
+            componentStack: '',
+          }}
+        />
+      )
+    }
+
+    throw match.error
+  }
+
+  return out
+}
+
+/**
+ * Render the next child match in the route tree.
+ */
+export function Outlet() {
+  const router = useRouter()
+  const matchId = useContext(matchContext)
+  const routeId = useRouterState({
+    select: (s) => s.matches.find((d) => d.id === matchId)?.routeId as string,
+  })
+
+  const route = router.routesById[routeId]!
+
+  const parentGlobalNotFound = useRouterState({
+    select: (s) => {
+      const matches = s.matches
+      const parentMatch = matches.find((d) => d.id === matchId)
+      invariant(
+        parentMatch,
+        `Could not find parent match for matchId "${matchId}"`,
+      )
+      return parentMatch.globalNotFound
+    },
+  })
+
+  const childMatchId = useRouterState({
+    select: (s) => {
+      const matches = s.matches
+      const index = matches.findIndex((d) => d.id === matchId)
+      return matches[index + 1]?.id
+    },
+  })
+
+  const pendingElement = router.options.defaultPendingComponent ? (
+    <router.options.defaultPendingComponent />
+  ) : null
+
+  if (parentGlobalNotFound) {
+    return renderRouteNotFound(router, route, undefined)
+  }
+
+  if (!childMatchId) {
+    return null
+  }
+
+  const nextMatch = <Match matchId={childMatchId} />
+
+  if (routeId === rootRouteId) {
+    return <Suspense fallback={pendingElement}>{nextMatch}</Suspense>
+  }
+
+  return nextMatch
+}
diff --git a/packages/preact-router/src/Matches.tsx b/packages/preact-router/src/Matches.tsx
new file mode 100644
index 00000000000..ed2b5c04bf1
--- /dev/null
+++ b/packages/preact-router/src/Matches.tsx
@@ -0,0 +1,284 @@
+import { useCallback, useContext } from 'preact/hooks'
+import warning from 'tiny-warning'
+import { rootRouteId } from '@tanstack/router-core'
+import { isServer } from '@tanstack/router-core/isServer'
+import { CatchBoundary, ErrorComponent } from './CatchBoundary'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
+import { Transitioner } from './Transitioner'
+import { matchContext } from './matchContext'
+import { Match } from './Match'
+import { SafeFragment } from './SafeFragment'
+import { Suspense } from './Suspense'
+import type {
+  StructuralSharingOption,
+  ValidateSelected,
+} from './structuralSharing'
+import type {
+  AnyRoute,
+  AnyRouter,
+  DeepPartial,
+  Expand,
+  MakeOptionalPathParams,
+  MakeOptionalSearchParams,
+  MakeRouteMatchUnion,
+  MaskOptions,
+  MatchRouteOptions,
+  NoInfer,
+  RegisteredRouter,
+  ResolveRelativePath,
+  ResolveRoute,
+  RouteByPath,
+  RouterState,
+  ToSubOptionsProps,
+} from '@tanstack/router-core'
+import type { ComponentChildren } from 'preact'
+import type { JSX } from 'preact/jsx-runtime'
+
+declare module '@tanstack/router-core' {
+  export interface RouteMatchExtensions {
+    meta?: Array<JSX.IntrinsicElements['meta'] | undefined>
+    links?: Array<JSX.IntrinsicElements['link'] | undefined>
+    scripts?: Array<JSX.IntrinsicElements['script'] | undefined>
+    styles?: Array<JSX.IntrinsicElements['style'] | undefined>
+    headScripts?: Array<JSX.IntrinsicElements['script'] | undefined>
+  }
+}
+
+/**
+ * Internal component that renders the router's active match tree.
+ */
+export function Matches() {
+  const router = useRouter()
+  const rootRoute: AnyRoute = router.routesById[rootRouteId]
+
+  const PendingComponent =
+    rootRoute.options.pendingComponent ?? router.options.defaultPendingComponent
+
+  const pendingElement = PendingComponent ? <PendingComponent /> : null
+
+  // Do not render a root Suspense during SSR or hydrating from SSR
+  const ResolvedSuspense =
+    (isServer ?? router.isServer) ||
+    (typeof document !== 'undefined' && router.ssr)
+      ? SafeFragment
+      : Suspense
+
+  const inner = (
+    <ResolvedSuspense fallback={pendingElement}>
+      {!(isServer ?? router.isServer) && <Transitioner />}
+      <MatchesInner />
+    </ResolvedSuspense>
+  )
+
+  return router.options.InnerWrap ? (
+    <router.options.InnerWrap>{inner}</router.options.InnerWrap>
+  ) : (
+    inner
+  )
+}
+
+function MatchesInner() {
+  const router = useRouter()
+  const matchId = useRouterState({
+    select: (s) => {
+      return s.matches[0]?.id
+    },
+  })
+
+  const resetKey = useRouterState({
+    select: (s) => s.loadedAt,
+  })
+
+  const matchComponent = matchId ? <Match matchId={matchId} /> : null
+
+  return (
+    <matchContext.Provider value={matchId}>
+      {router.options.disableGlobalCatchBoundary ? (
+        matchComponent
+      ) : (
+        <CatchBoundary
+          getResetKey={() => resetKey}
+          errorComponent={ErrorComponent}
+          onCatch={(error) => {
+            warning(
+              false,
+              `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
+            )
+            warning(false, error.message || error.toString())
+          }}
+        >
+          {matchComponent}
+        </CatchBoundary>
+      )}
+    </matchContext.Provider>
+  )
+}
+
+export type UseMatchRouteOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends string = string,
+  TTo extends string | undefined = undefined,
+  TMaskFrom extends string = TFrom,
+  TMaskTo extends string = '',
+> = ToSubOptionsProps<TRouter, TFrom, TTo> &
+  DeepPartial<MakeOptionalSearchParams<TRouter, TFrom, TTo>> &
+  DeepPartial<MakeOptionalPathParams<TRouter, TFrom, TTo>> &
+  MaskOptions<TRouter, TMaskFrom, TMaskTo> &
+  MatchRouteOptions
+
+/**
+ * Create a matcher function for testing locations against route definitions.
+ */
+export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
+  const router = useRouter()
+
+  useRouterState({
+    select: (s) => [s.location.href, s.resolvedLocation?.href, s.status],
+    structuralSharing: true as any,
+  })
+
+  return useCallback(
+    <
+      const TFrom extends string = string,
+      const TTo extends string | undefined = undefined,
+      const TMaskFrom extends string = TFrom,
+      const TMaskTo extends string = '',
+    >(
+      opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
+    ):
+      | false
+      | Expand<ResolveRoute<TRouter, TFrom, TTo>['types']['allParams']> => {
+      const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts
+
+      return router.matchRoute(rest as any, {
+        pending,
+        caseSensitive,
+        fuzzy,
+        includeSearch,
+      })
+    },
+    [router],
+  )
+}
+
+export type MakeMatchRouteOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends string = string,
+  TTo extends string | undefined = undefined,
+  TMaskFrom extends string = TFrom,
+  TMaskTo extends string = '',
+> = UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {
+  children?:
+    | ((
+        params?: RouteByPath<
+          TRouter['routeTree'],
+          ResolveRelativePath<TFrom, NoInfer<TTo>>
+        >['types']['allParams'],
+      ) => ComponentChildren)
+    | ComponentChildren
+}
+
+/**
+ * Component that conditionally renders its children based on whether a route
+ * matches the provided options.
+ */
+export function MatchRoute<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string = string,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
+>(props: MakeMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): any {
+  const matchRoute = useMatchRoute()
+  const params = matchRoute(props as any) as boolean
+
+  if (typeof props.children === 'function') {
+    return (props.children as any)(params)
+  }
+
+  return params ? props.children : null
+}
+
+export interface UseMatchesBaseOptions<
+  TRouter extends AnyRouter,
+  TSelected,
+  TStructuralSharing,
+> {
+  select?: (
+    matches: Array<MakeRouteMatchUnion<TRouter>>,
+  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>
+}
+
+export type UseMatchesResult<
+  TRouter extends AnyRouter,
+  TSelected,
+> = unknown extends TSelected ? Array<MakeRouteMatchUnion<TRouter>> : TSelected
+
+export function useMatches<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &
+    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+): UseMatchesResult<TRouter, TSelected> {
+  return useRouterState({
+    select: (state: RouterState<TRouter['routeTree']>) => {
+      const matches = state.matches
+      return opts?.select
+        ? opts.select(matches as Array<MakeRouteMatchUnion<TRouter>>)
+        : matches
+    },
+    structuralSharing: opts?.structuralSharing,
+  } as any) as UseMatchesResult<TRouter, TSelected>
+}
+
+/**
+ * Read the parent matches relative to the current match.
+ */
+export function useParentMatches<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &
+    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+): UseMatchesResult<TRouter, TSelected> {
+  const contextMatchId = useContext(matchContext)
+
+  return useMatches({
+    select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {
+      matches = matches.slice(
+        0,
+        matches.findIndex((d) => d.id === contextMatchId),
+      )
+      return opts?.select ? opts.select(matches) : matches
+    },
+    structuralSharing: opts?.structuralSharing,
+  } as any)
+}
+
+/**
+ * Read the child matches relative to the current match.
+ */
+export function useChildMatches<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseMatchesBaseOptions<TRouter, TSelected, TStructuralSharing> &
+    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+): UseMatchesResult<TRouter, TSelected> {
+  const contextMatchId = useContext(matchContext)
+
+  return useMatches({
+    select: (matches: Array<MakeRouteMatchUnion<TRouter>>) => {
+      matches = matches.slice(
+        matches.findIndex((d) => d.id === contextMatchId) + 1,
+      )
+      return opts?.select ? opts.select(matches) : matches
+    },
+    structuralSharing: opts?.structuralSharing,
+  } as any)
+}
diff --git a/packages/preact-router/src/RouterProvider.tsx b/packages/preact-router/src/RouterProvider.tsx
new file mode 100644
index 00000000000..7c08b7c92b4
--- /dev/null
+++ b/packages/preact-router/src/RouterProvider.tsx
@@ -0,0 +1,87 @@
+import { Matches } from './Matches'
+import { getRouterContext } from './routerContext'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  RouterOptions,
+} from '@tanstack/router-core'
+import type { ComponentChildren } from 'preact'
+
+/**
+ * Low-level provider that places the router into Preact context.
+ */
+export function RouterContextProvider<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+>({
+  router,
+  children,
+  ...rest
+}: RouterProps<TRouter, TDehydrated> & {
+  children: ComponentChildren
+}) {
+  if (Object.keys(rest).length > 0) {
+    router.update({
+      ...router.options,
+      ...rest,
+      context: {
+        ...router.options.context,
+        ...rest.context,
+      },
+    } as any)
+  }
+
+  const routerContext = getRouterContext()
+
+  const provider = (
+    <routerContext.Provider value={router as AnyRouter}>
+      {children}
+    </routerContext.Provider>
+  )
+
+  if (router.options.Wrap) {
+    return <router.options.Wrap>{provider}</router.options.Wrap>
+  }
+
+  return provider
+}
+
+/**
+ * Top-level component that renders the active route matches and provides the
+ * router to the Preact tree via context.
+ */
+export function RouterProvider<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+>({ router, ...rest }: RouterProps<TRouter, TDehydrated>) {
+  return (
+    <RouterContextProvider router={router} {...rest}>
+      <Matches />
+    </RouterContextProvider>
+  )
+}
+
+export type RouterProps<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDehydrated extends Record<string, any> = Record<string, any>,
+> = Omit<
+  RouterOptions<
+    TRouter['routeTree'],
+    NonNullable<TRouter['options']['trailingSlash']>,
+    NonNullable<TRouter['options']['defaultStructuralSharing']>,
+    TRouter['history'],
+    TDehydrated
+  >,
+  'context'
+> & {
+  router: TRouter
+  context?: Partial<
+    RouterOptions<
+      TRouter['routeTree'],
+      NonNullable<TRouter['options']['trailingSlash']>,
+      NonNullable<TRouter['options']['defaultStructuralSharing']>,
+      TRouter['history'],
+      TDehydrated
+    >['context']
+  >
+}
diff --git a/packages/preact-router/src/SafeFragment.tsx b/packages/preact-router/src/SafeFragment.tsx
new file mode 100644
index 00000000000..c861418e173
--- /dev/null
+++ b/packages/preact-router/src/SafeFragment.tsx
@@ -0,0 +1,5 @@
+import type { ComponentChildren } from 'preact'
+
+export function SafeFragment(props: any) {
+  return <>{props.children}</>
+}
diff --git a/packages/preact-router/src/ScriptOnce.tsx b/packages/preact-router/src/ScriptOnce.tsx
new file mode 100644
index 00000000000..f552becb9f3
--- /dev/null
+++ b/packages/preact-router/src/ScriptOnce.tsx
@@ -0,0 +1,21 @@
+import { isServer } from '@tanstack/router-core/isServer'
+import { useRouter } from './useRouter'
+
+/**
+ * Server-only helper to emit a script tag exactly once during SSR.
+ */
+export function ScriptOnce({ children }: { children: string }) {
+  const router = useRouter()
+  if (!(isServer ?? router.isServer)) {
+    return null
+  }
+
+  return (
+    <script
+      nonce={router.options.ssr?.nonce}
+      dangerouslySetInnerHTML={{
+        __html: children + ';document.currentScript.remove()',
+      }}
+    />
+  )
+}
diff --git a/packages/preact-router/src/Scripts.tsx b/packages/preact-router/src/Scripts.tsx
new file mode 100644
index 00000000000..e7fced4d72b
--- /dev/null
+++ b/packages/preact-router/src/Scripts.tsx
@@ -0,0 +1,80 @@
+import { Asset } from './Asset'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+/**
+ * Render body script tags collected from route matches and SSR manifests.
+ * Should be placed near the end of the document body.
+ */
+export const Scripts = () => {
+  const router = useRouter()
+  const nonce = router.options.ssr?.nonce
+  const assetScripts = useRouterState({
+    select: (state) => {
+      const assetScripts: Array<RouterManagedTag> = []
+      const manifest = router.ssr?.manifest
+
+      if (!manifest) {
+        return []
+      }
+
+      state.matches
+        .map((match) => router.looseRoutesById[match.routeId]!)
+        .forEach((route) =>
+          manifest.routes[route.id]?.assets
+            ?.filter((d) => d.tag === 'script')
+            .forEach((asset) => {
+              assetScripts.push({
+                tag: 'script',
+                attrs: { ...asset.attrs, nonce },
+                children: asset.children,
+              } as any)
+            }),
+        )
+
+      return assetScripts
+    },
+    structuralSharing: true as any,
+  })
+
+  const { scripts } = useRouterState({
+    select: (state) => ({
+      scripts: (
+        state.matches
+          .map((match) => match.scripts!)
+          .flat(1)
+          .filter(Boolean) as Array<RouterManagedTag>
+      ).map(({ children, ...script }) => ({
+        tag: 'script',
+        attrs: {
+          ...script,
+          suppressHydrationWarning: true,
+          nonce,
+        },
+        children,
+      })),
+    }),
+    structuralSharing: true as any,
+  })
+
+  let serverBufferedScript: RouterManagedTag | undefined = undefined
+
+  if (router.serverSsr) {
+    serverBufferedScript = router.serverSsr.takeBufferedScripts()
+  }
+
+  const allScripts = [...scripts, ...assetScripts] as Array<RouterManagedTag>
+
+  if (serverBufferedScript) {
+    allScripts.unshift(serverBufferedScript)
+  }
+
+  return (
+    <>
+      {allScripts.map((asset, i) => (
+        <Asset {...asset} key={`tsr-scripts-${asset.tag}-${i}`} />
+      ))}
+    </>
+  )
+}
diff --git a/packages/preact-router/src/ScrollRestoration.tsx b/packages/preact-router/src/ScrollRestoration.tsx
new file mode 100644
index 00000000000..55591c92cee
--- /dev/null
+++ b/packages/preact-router/src/ScrollRestoration.tsx
@@ -0,0 +1,69 @@
+import {
+  defaultGetScrollRestorationKey,
+  getCssSelector,
+  scrollRestorationCache,
+  setupScrollRestoration,
+} from '@tanstack/router-core'
+import { useRouter } from './useRouter'
+import type {
+  ParsedLocation,
+  ScrollRestorationEntry,
+  ScrollRestorationOptions,
+} from '@tanstack/router-core'
+
+function useScrollRestoration() {
+  const router = useRouter()
+  setupScrollRestoration(router, true)
+}
+
+/**
+ * @deprecated Use the `scrollRestoration` router option instead.
+ */
+export function ScrollRestoration(_props: ScrollRestorationOptions) {
+  useScrollRestoration()
+
+  if (process.env.NODE_ENV === 'development') {
+    console.warn(
+      "The ScrollRestoration component is deprecated. Use createRouter's `scrollRestoration` option instead.",
+    )
+  }
+
+  return null
+}
+
+export function useElementScrollRestoration(
+  options: (
+    | {
+        id: string
+        getElement?: () => Window | Element | undefined | null
+      }
+    | {
+        id?: string
+        getElement: () => Window | Element | undefined | null
+      }
+  ) & {
+    getKey?: (location: ParsedLocation) => string
+  },
+): ScrollRestorationEntry | undefined {
+  useScrollRestoration()
+
+  const router = useRouter()
+  const getKey = options.getKey || defaultGetScrollRestorationKey
+
+  let elementSelector = ''
+
+  if (options.id) {
+    elementSelector = `[data-scroll-restoration-id="${options.id}"]`
+  } else {
+    const element = options.getElement?.()
+    if (!element) {
+      return
+    }
+    elementSelector =
+      element instanceof Window ? 'window' : getCssSelector(element)
+  }
+
+  const restoreKey = getKey(router.latestLocation)
+  const byKey = scrollRestorationCache?.state[restoreKey]
+  return byKey?.[elementSelector]
+}
diff --git a/packages/preact-router/src/Suspense.tsx b/packages/preact-router/src/Suspense.tsx
new file mode 100644
index 00000000000..66d2372d408
--- /dev/null
+++ b/packages/preact-router/src/Suspense.tsx
@@ -0,0 +1,45 @@
+import { Component } from 'preact'
+import type { ComponentChildren } from 'preact'
+
+interface SuspenseProps {
+  fallback?: ComponentChildren
+  children: ComponentChildren
+}
+
+interface SuspenseState {
+  pending: boolean
+}
+
+export class Suspense extends Component<SuspenseProps, SuspenseState> {
+  state = { pending: false }
+  _pendingPromises = new Set<Promise<any>>()
+
+  componentDidCatch(err: any) {
+    if (err && typeof err.then === 'function') {
+      // It's a thrown promise (suspense protocol)
+      this._pendingPromises.add(err)
+      this.setState({ pending: true })
+      err.then(
+        () => {
+          this._pendingPromises.delete(err)
+          if (this._pendingPromises.size === 0) {
+            this.setState({ pending: false })
+          }
+        },
+        () => {
+          this._pendingPromises.delete(err)
+          if (this._pendingPromises.size === 0) {
+            this.setState({ pending: false })
+          }
+        },
+      )
+    }
+  }
+
+  render() {
+    if (this.state.pending) {
+      return this.props.fallback ?? null
+    }
+    return this.props.children
+  }
+}
diff --git a/packages/preact-router/src/Transitioner.tsx b/packages/preact-router/src/Transitioner.tsx
new file mode 100644
index 00000000000..28e6deed07d
--- /dev/null
+++ b/packages/preact-router/src/Transitioner.tsx
@@ -0,0 +1,125 @@
+import { useEffect, useRef, useState } from 'preact/hooks'
+import {
+  getLocationChangeInfo,
+  handleHashScroll,
+  trimPathRight,
+} from '@tanstack/router-core'
+import { useLayoutEffect, usePrevious } from './utils'
+import { useRouter } from './useRouter'
+import { useRouterState } from './useRouterState'
+
+export function Transitioner() {
+  const router = useRouter()
+  const mountLoadForRouter = useRef({ router, mounted: false })
+
+  const [isTransitioning, setIsTransitioning] = useState(false)
+  const { hasPendingMatches, isLoading } = useRouterState({
+    select: (s) => ({
+      isLoading: s.isLoading,
+      hasPendingMatches: s.matches.some((d) => d.status === 'pending'),
+    }),
+    structuralSharing: true,
+  })
+
+  const previousIsLoading = usePrevious(isLoading)
+
+  const isAnyPending = isLoading || isTransitioning || hasPendingMatches
+  const previousIsAnyPending = usePrevious(isAnyPending)
+
+  const isPagePending = isLoading || hasPendingMatches
+  const previousIsPagePending = usePrevious(isPagePending)
+
+  // No React.startTransition in Preact without compat - use synchronous approach
+  router.startTransition = (fn: () => void) => {
+    setIsTransitioning(true)
+    fn()
+    setIsTransitioning(false)
+  }
+
+  // Subscribe to location changes and try to load the new location
+  useEffect(() => {
+    const unsub = router.history.subscribe(router.load)
+
+    const nextLocation = router.buildLocation({
+      to: router.latestLocation.pathname,
+      search: true,
+      params: true,
+      hash: true,
+      state: true,
+      _includeValidateSearch: true,
+    })
+
+    if (
+      trimPathRight(router.latestLocation.publicHref) !==
+      trimPathRight(nextLocation.publicHref)
+    ) {
+      router.commitLocation({ ...nextLocation, replace: true })
+    }
+
+    return () => {
+      unsub()
+    }
+  }, [router, router.history])
+
+  // Try to load the initial location
+  useLayoutEffect(() => {
+    if (
+      (typeof window !== 'undefined' && router.ssr) ||
+      (mountLoadForRouter.current.router === router &&
+        mountLoadForRouter.current.mounted)
+    ) {
+      return
+    }
+    mountLoadForRouter.current = { router, mounted: true }
+
+    const tryLoad = async () => {
+      try {
+        await router.load()
+      } catch (err) {
+        console.error(err)
+      }
+    }
+
+    tryLoad()
+  }, [router])
+
+  useLayoutEffect(() => {
+    if (previousIsLoading && !isLoading) {
+      router.emit({
+        type: 'onLoad',
+        ...getLocationChangeInfo(router.state),
+      })
+    }
+  }, [previousIsLoading, router, isLoading])
+
+  useLayoutEffect(() => {
+    if (previousIsPagePending && !isPagePending) {
+      router.emit({
+        type: 'onBeforeRouteMount',
+        ...getLocationChangeInfo(router.state),
+      })
+    }
+  }, [isPagePending, previousIsPagePending, router])
+
+  useLayoutEffect(() => {
+    if (previousIsAnyPending && !isAnyPending) {
+      const changeInfo = getLocationChangeInfo(router.state)
+      router.emit({
+        type: 'onResolved',
+        ...changeInfo,
+      })
+
+      router.__store.setState((s: typeof router.state) => ({
+        ...s,
+        status: 'idle',
+        resolvedLocation: s.location,
+      }))
+
+      if (changeInfo.hrefChanged) {
+        handleHashScroll(router)
+      }
+    }
+  }, [isAnyPending, previousIsAnyPending, router])
+
+  return null
+}
diff --git a/packages/preact-router/src/awaited.tsx b/packages/preact-router/src/awaited.tsx
new file mode 100644
index 00000000000..8234e8ccf0a
--- /dev/null
+++ b/packages/preact-router/src/awaited.tsx
@@ -0,0 +1,51 @@
+import { TSR_DEFERRED_PROMISE, defer } from '@tanstack/router-core'
+import { Suspense } from './Suspense'
+import type { ComponentChildren, VNode } from 'preact'
+
+export type AwaitOptions<T> = {
+  promise: Promise<T>
+}
+
+/** Suspend until a deferred promise resolves or rejects and return its data. */
+export function useAwaited<T>({ promise: _promise }: AwaitOptions<T>): T {
+  // No React.use in Preact - use throw-promise pattern for suspense
+  const promise = defer(_promise)
+
+  if (promise[TSR_DEFERRED_PROMISE].status === 'pending') {
+    throw promise
+  }
+
+  if (promise[TSR_DEFERRED_PROMISE].status === 'error') {
+    throw promise[TSR_DEFERRED_PROMISE].error
+  }
+
+  return promise[TSR_DEFERRED_PROMISE].data
+}
+
+/**
+ * Component that suspends on a deferred promise and renders its child with
+ * the resolved value. Optionally provides a Suspense fallback.
+ */
+export function Await<T>(
+  props: AwaitOptions<T> & {
+    fallback?: ComponentChildren
+    children: (result: T) => ComponentChildren
+  },
+) {
+  const inner = <AwaitInner {...props} />
+  if (props.fallback) {
+    return <Suspense fallback={props.fallback}>{inner}</Suspense>
+  }
+  return inner
+}
+
+function AwaitInner<T>(
+  props: AwaitOptions<T> & {
+    fallback?: ComponentChildren
+    children: (result: T) => ComponentChildren
+  },
+) {
+  const data = useAwaited(props)
+
+  return props.children(data) as VNode
+}
diff --git a/packages/preact-router/src/fileRoute.ts b/packages/preact-router/src/fileRoute.ts
new file mode 100644
index 00000000000..0a8d7d44b34
--- /dev/null
+++ b/packages/preact-router/src/fileRoute.ts
@@ -0,0 +1,289 @@
+import warning from 'tiny-warning'
+import { createRoute } from './route'
+
+import { useMatch } from './useMatch'
+import { useLoaderDeps } from './useLoaderDeps'
+import { useLoaderData } from './useLoaderData'
+import { useSearch } from './useSearch'
+import { useParams } from './useParams'
+import { useNavigate } from './useNavigate'
+import { useRouter } from './useRouter'
+import type { UseParamsRoute } from './useParams'
+import type { UseMatchRoute } from './useMatch'
+import type { UseSearchRoute } from './useSearch'
+import type {
+  AnyContext,
+  AnyRoute,
+  AnyRouter,
+  Constrain,
+  ConstrainLiteral,
+  FileBaseRouteOptions,
+  FileRoutesByPath,
+  LazyRouteOptions,
+  Register,
+  RegisteredRouter,
+  ResolveParams,
+  Route,
+  RouteById,
+  RouteConstraints,
+  RouteIds,
+  RouteLoaderFn,
+  UpdatableRouteOptions,
+  UseNavigateResult,
+} from '@tanstack/router-core'
+import type { UseLoaderDepsRoute } from './useLoaderDeps'
+import type { UseLoaderDataRoute } from './useLoaderData'
+import type { UseRouteContextRoute } from './useRouteContext'
+
+/**
+ * Creates a file-based Route factory for a given path.
+ *
+ * @param path File path literal for the route (usually auto-generated).
+ * @returns A function that accepts Route options and returns a Route instance.
+ */
+export function createFileRoute<
+  TFilePath extends keyof FileRoutesByPath,
+  TParentRoute extends AnyRoute = FileRoutesByPath[TFilePath]['parentRoute'],
+  TId extends RouteConstraints['TId'] = FileRoutesByPath[TFilePath]['id'],
+  TPath extends RouteConstraints['TPath'] = FileRoutesByPath[TFilePath]['path'],
+  TFullPath extends RouteConstraints['TFullPath'] =
+    FileRoutesByPath[TFilePath]['fullPath'],
+>(
+  path?: TFilePath,
+): FileRoute<TFilePath, TParentRoute, TId, TPath, TFullPath>['createRoute'] {
+  if (typeof path === 'object') {
+    return new FileRoute<TFilePath, TParentRoute, TId, TPath, TFullPath>(path, {
+      silent: true,
+    }).createRoute(path) as any
+  }
+  return new FileRoute<TFilePath, TParentRoute, TId, TPath, TFullPath>(path, {
+    silent: true,
+  }).createRoute
+}
+
+/** 
+  @deprecated It's no longer recommended to use the `FileRoute` class directly.
+  Instead, use `createFileRoute('/path/to/file')(options)` to create a file route.
+*/
+export class FileRoute<
+  TFilePath extends keyof FileRoutesByPath,
+  TParentRoute extends AnyRoute = FileRoutesByPath[TFilePath]['parentRoute'],
+  TId extends RouteConstraints['TId'] = FileRoutesByPath[TFilePath]['id'],
+  TPath extends RouteConstraints['TPath'] = FileRoutesByPath[TFilePath]['path'],
+  TFullPath extends RouteConstraints['TFullPath'] =
+    FileRoutesByPath[TFilePath]['fullPath'],
+> {
+  silent?: boolean
+
+  constructor(
+    public path?: TFilePath,
+    _opts?: { silent: boolean },
+  ) {
+    this.silent = _opts?.silent
+  }
+
+  createRoute = <
+    TRegister = Register,
+    TSearchValidator = undefined,
+    TParams = ResolveParams<TPath>,
+    TRouteContextFn = AnyContext,
+    TBeforeLoadFn = AnyContext,
+    TLoaderDeps extends Record<string, any> = {},
+    TLoaderFn = undefined,
+    TChildren = unknown,
+    TSSR = unknown,
+    const TMiddlewares = unknown,
+    THandlers = undefined,
+  >(
+    options?: FileBaseRouteOptions<
+      TRegister,
+      TParentRoute,
+      TId,
+      TPath,
+      TSearchValidator,
+      TParams,
+      TLoaderDeps,
+      TLoaderFn,
+      AnyContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      AnyContext,
+      TSSR,
+      TMiddlewares,
+      THandlers
+    > &
+      UpdatableRouteOptions<
+        TParentRoute,
+        TId,
+        TFullPath,
+        TParams,
+        TSearchValidator,
+        TLoaderFn,
+        TLoaderDeps,
+        AnyContext,
+        TRouteContextFn,
+        TBeforeLoadFn
+      >,
+  ): Route<
+    TRegister,
+    TParentRoute,
+    TPath,
+    TFullPath,
+    TFilePath,
+    TId,
+    TSearchValidator,
+    TParams,
+    AnyContext,
+    TRouteContextFn,
+    TBeforeLoadFn,
+    TLoaderDeps,
+    TLoaderFn,
+    TChildren,
+    unknown,
+    TSSR,
+    TMiddlewares,
+    THandlers
+  > => {
+    warning(
+      this.silent,
+      'FileRoute is deprecated and will be removed in the next major version. Use the createFileRoute(path)(options) function instead.',
+    )
+    const route = createRoute(options as any)
+    ;(route as any).isRoot = false
+    return route as any
+  }
+}
+
+/**
+  @deprecated It's recommended not to split loaders into separate files.
+  Instead, place the loader function in the main route file via `createFileRoute`.
+*/
+export function FileRouteLoader<
+  TFilePath extends keyof FileRoutesByPath,
+  TRoute extends FileRoutesByPath[TFilePath]['preLoaderRoute'],
+>(
+  _path: TFilePath,
+): <TLoaderFn>(
+  loaderFn: Constrain<
+    TLoaderFn,
+    RouteLoaderFn<
+      Register,
+      TRoute['parentRoute'],
+      TRoute['types']['id'],
+      TRoute['types']['params'],
+      TRoute['types']['loaderDeps'],
+      TRoute['types']['routerContext'],
+      TRoute['types']['routeContextFn'],
+      TRoute['types']['beforeLoadFn']
+    >
+  >,
+) => TLoaderFn {
+  warning(
+    false,
+    `FileRouteLoader is deprecated and will be removed in the next major version. Please place the loader function in the the main route file, inside the \`createFileRoute('/path/to/file')(options)\` options`,
+  )
+  return (loaderFn) => loaderFn as any
+}
+
+declare module '@tanstack/router-core' {
+  export interface LazyRoute<in out TRoute extends AnyRoute> {
+    useMatch: UseMatchRoute<TRoute['id']>
+    useRouteContext: UseRouteContextRoute<TRoute['id']>
+    useSearch: UseSearchRoute<TRoute['id']>
+    useParams: UseParamsRoute<TRoute['id']>
+    useLoaderDeps: UseLoaderDepsRoute<TRoute['id']>
+    useLoaderData: UseLoaderDataRoute<TRoute['id']>
+    useNavigate: () => UseNavigateResult<TRoute['fullPath']>
+  }
+}
+
+export class LazyRoute<TRoute extends AnyRoute> {
+  options: {
+    id: string
+  } & LazyRouteOptions
+
+  constructor(
+    opts: {
+      id: string
+    } & LazyRouteOptions,
+  ) {
+    this.options = opts
+    // No $$typeof = Symbol.for('react.memo') - not needed for Preact
+  }
+
+  useMatch: UseMatchRoute<TRoute['id']> = (opts) => {
+    return useMatch({
+      select: opts?.select,
+      from: this.options.id,
+      structuralSharing: opts?.structuralSharing,
+    } as any) as any
+  }
+
+  useRouteContext: UseRouteContextRoute<TRoute['id']> = (opts) => {
+    return useMatch({
+      from: this.options.id,
+      select: (d: any) => (opts?.select ? opts.select(d.context) : d.context),
+    }) as any
+  }
+
+  useSearch: UseSearchRoute<TRoute['id']> = (opts) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    return useSearch({
+      select: opts?.select,
+      structuralSharing: opts?.structuralSharing,
+      from: this.options.id,
+    } as any) as any
+  }
+
+  useParams: UseParamsRoute<TRoute['id']> = (opts) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    return useParams({
+      select: opts?.select,
+      structuralSharing: opts?.structuralSharing,
+      from: this.options.id,
+    } as any) as any
+  }
+
+  useLoaderDeps: UseLoaderDepsRoute<TRoute['id']> = (opts) => {
+    return useLoaderDeps({ ...opts, from: this.options.id } as any)
+  }
+
+  useLoaderData: UseLoaderDataRoute<TRoute['id']> = (opts) => {
+    return useLoaderData({ ...opts, from: this.options.id } as any)
+  }
+
+  useNavigate = (): UseNavigateResult<TRoute['fullPath']> => {
+    const router = useRouter()
+    return useNavigate({ from: router.routesById[this.options.id].fullPath })
+  }
+}
+
+/**
+ * Creates a lazily-configurable code-based route stub by ID.
+ */
+export function createLazyRoute<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TId extends string = string,
+  TRoute extends AnyRoute = RouteById<TRouter['routeTree'], TId>,
+>(id: ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>) {
+  return (opts: LazyRouteOptions) => {
+    return new LazyRoute<TRoute>({
+      id: id,
+      ...opts,
+    })
+  }
+}
+
+/**
+ * Creates a lazily-configurable file-based route stub by file path.
+ */
+export function createLazyFileRoute<
+  TFilePath extends keyof FileRoutesByPath,
+  TRoute extends FileRoutesByPath[TFilePath]['preLoaderRoute'],
+>(id: TFilePath): (opts: LazyRouteOptions) => LazyRoute<TRoute> {
+  if (typeof id === 'object') {
+    return new LazyRoute<TRoute>(id) as any
+  }
+
+  return (opts: LazyRouteOptions) => new LazyRoute<TRoute>({ id, ...opts })
+}
diff --git a/packages/preact-router/src/headContentUtils.tsx b/packages/preact-router/src/headContentUtils.tsx
new file mode 100644
index 00000000000..1d67e045283
--- /dev/null
+++ b/packages/preact-router/src/headContentUtils.tsx
@@ -0,0 +1,213 @@
+import { useMemo } from 'preact/hooks'
+import { escapeHtml } from '@tanstack/router-core'
+import { useRouter } from './useRouter'
+import { useRouterState } from './useRouterState'
+import type { RouterManagedTag } from '@tanstack/router-core'
+
+/**
+ * Build the list of head/link/meta/script tags to render for active matches.
+ * Used internally by `HeadContent`.
+ */
+export const useTags = () => {
+  const router = useRouter()
+  const nonce = router.options.ssr?.nonce
+  const routeMeta = useRouterState({
+    select: (state) => {
+      return state.matches.map((match) => match.meta!).filter(Boolean)
+    },
+  })
+
+  const meta: Array<RouterManagedTag> = useMemo(() => {
+    const resultMeta: Array<RouterManagedTag> = []
+    const metaByAttribute: Record<string, true> = {}
+    let title: RouterManagedTag | undefined
+    for (let i = routeMeta.length - 1; i >= 0; i--) {
+      const metas = routeMeta[i]!
+      for (let j = metas.length - 1; j >= 0; j--) {
+        const m = metas[j]
+        if (!m) continue
+
+        if (m.title) {
+          if (!title) {
+            title = {
+              tag: 'title',
+              children: m.title as string,
+            }
+          }
+        } else if ('script:ld+json' in m) {
+          try {
+            const json = JSON.stringify(m['script:ld+json'])
+            resultMeta.push({
+              tag: 'script',
+              attrs: {
+                type: 'application/ld+json',
+              },
+              children: escapeHtml(json),
+            })
+          } catch {
+            // Skip invalid JSON-LD objects
+          }
+        } else {
+          const attribute = (m.name ?? m.property) as string | undefined
+          if (attribute) {
+            if (metaByAttribute[attribute]) {
+              continue
+            } else {
+              metaByAttribute[attribute] = true
+            }
+          }
+
+          resultMeta.push({
+            tag: 'meta',
+            attrs: {
+              ...m,
+              nonce,
+            },
+          })
+        }
+      }
+    }
+
+    if (title) {
+      resultMeta.push(title)
+    }
+
+    if (nonce) {
+      resultMeta.push({
+        tag: 'meta',
+        attrs: {
+          property: 'csp-nonce',
+          content: nonce,
+        },
+      })
+    }
+    resultMeta.reverse()
+
+    return resultMeta
+  }, [routeMeta, nonce])
+
+  const links = useRouterState({
+    select: (state) => {
+      const constructed = state.matches
+        .map((match) => match.links!)
+        .filter(Boolean)
+        .flat(1)
+        .map((link) => ({
+          tag: 'link',
+          attrs: {
+            ...link,
+            nonce,
+          },
+        })) satisfies Array<RouterManagedTag>
+
+      const manifest = router.ssr?.manifest
+
+      const assets = state.matches
+        .map((match) => manifest?.routes[match.routeId]?.assets ?? [])
+        .filter(Boolean)
+        .flat(1)
+        .filter((asset) => asset.tag === 'link')
+        .map(
+          (asset) =>
+            ({
+              tag: 'link',
+              attrs: {
+                ...asset.attrs,
+                suppressHydrationWarning: true,
+                nonce,
+              },
+            }) satisfies RouterManagedTag,
+        )
+
+      return [...constructed, ...assets]
+    },
+    structuralSharing: true as any,
+  })
+
+  const preloadLinks = useRouterState({
+    select: (state) => {
+      const preloadLinks: Array<RouterManagedTag> = []
+
+      state.matches
+        .map((match) => router.looseRoutesById[match.routeId]!)
+        .forEach((route) =>
+          router.ssr?.manifest?.routes[route.id]?.preloads
+            ?.filter(Boolean)
+            .forEach((preload) => {
+              preloadLinks.push({
+                tag: 'link',
+                attrs: {
+                  rel: 'modulepreload',
+                  href: preload,
+                  nonce,
+                },
+              })
+            }),
+        )
+
+      return preloadLinks
+    },
+    structuralSharing: true as any,
+  })
+
+  const styles = useRouterState({
+    select: (state) =>
+      (
+        state.matches
+          .map((match) => match.styles!)
+          .flat(1)
+          .filter(Boolean) as Array<RouterManagedTag>
+      ).map(({ children, ...attrs }) => ({
+        tag: 'style',
+        attrs: {
+          ...attrs,
+          nonce,
+        },
+        children,
+      })),
+    structuralSharing: true as any,
+  })
+
+  const headScripts: Array<RouterManagedTag> = useRouterState({
+    select: (state) =>
+      (
+        state.matches
+          .map((match) => match.headScripts!)
+          .flat(1)
+          .filter(Boolean) as Array<RouterManagedTag>
+      ).map(({ children, ...script }) => ({
+        tag: 'script',
+        attrs: {
+          ...script,
+          nonce,
+        },
+        children,
+      })),
+    structuralSharing: true as any,
+  })
+
+  return uniqBy(
+    [
+      ...meta,
+      ...preloadLinks,
+      ...links,
+      ...styles,
+      ...headScripts,
+    ] as Array<RouterManagedTag>,
+    (d) => {
+      return JSON.stringify(d)
+    },
+  )
+}
+
+export function uniqBy<T>(arr: Array<T>, fn: (item: T) => string) {
+  const seen = new Set<string>()
+  return arr.filter((item) => {
+    const key = fn(item)
+    if (seen.has(key)) {
+      return false
+    }
+    seen.add(key)
+    return true
+  })
+}
diff --git a/packages/preact-router/src/history.ts b/packages/preact-router/src/history.ts
new file mode 100644
index 00000000000..2271af692cd
--- /dev/null
+++ b/packages/preact-router/src/history.ts
@@ -0,0 +1,9 @@
+import type { HistoryLocation } from '@tanstack/history'
+
+declare module '@tanstack/history' {
+  interface HistoryState {
+    __tempLocation?: HistoryLocation
+    __tempKey?: string
+    __hashScrollIntoViewOptions?: boolean | ScrollIntoViewOptions
+  }
+}
diff --git a/packages/preact-router/src/index.dev.tsx b/packages/preact-router/src/index.dev.tsx
new file mode 100644
index 00000000000..e7c962f3d69
--- /dev/null
+++ b/packages/preact-router/src/index.dev.tsx
@@ -0,0 +1,6 @@
+// Development entry point - re-exports everything from index.tsx
+// but overrides HeadContent with the dev version that handles
+// dev styles cleanup after hydration
+
+export * from './index'
+export { HeadContent } from './HeadContent.dev'
diff --git a/packages/preact-router/src/index.tsx b/packages/preact-router/src/index.tsx
new file mode 100644
index 00000000000..331b49214d3
--- /dev/null
+++ b/packages/preact-router/src/index.tsx
@@ -0,0 +1,360 @@
+export {
+  defer,
+  TSR_DEFERRED_PROMISE,
+  isMatch,
+  joinPaths,
+  cleanPath,
+  trimPathLeft,
+  trimPathRight,
+  trimPath,
+  resolvePath,
+  interpolatePath,
+  rootRouteId,
+  defaultSerializeError,
+  defaultParseSearch,
+  defaultStringifySearch,
+  parseSearchWith,
+  stringifySearchWith,
+  functionalUpdate,
+  replaceEqualDeep,
+  isPlainObject,
+  isPlainArray,
+  deepEqual,
+  createControlledPromise,
+  retainSearchParams,
+  stripSearchParams,
+  createSerializationAdapter,
+} from '@tanstack/router-core'
+
+export type {
+  AnyRoute,
+  DeferredPromiseState,
+  DeferredPromise,
+  ParsedLocation,
+  RemoveTrailingSlashes,
+  RemoveLeadingSlashes,
+  ActiveOptions,
+  ResolveRelativePath,
+  RootRouteId,
+  AnyPathParams,
+  ResolveParams,
+  ResolveOptionalParams,
+  ResolveRequiredParams,
+  SearchSchemaInput,
+  AnyContext,
+  RouteContext,
+  PreloadableObj,
+  RoutePathOptions,
+  StaticDataRouteOption,
+  RoutePathOptionsIntersection,
+  UpdatableStaticRouteOption,
+  MetaDescriptor,
+  RouteLinkEntry,
+  ParseParamsFn,
+  SearchFilter,
+  ResolveId,
+  InferFullSearchSchema,
+  InferFullSearchSchemaInput,
+  ErrorRouteProps,
+  ErrorComponentProps,
+  NotFoundRouteProps,
+  TrimPath,
+  TrimPathLeft,
+  TrimPathRight,
+  StringifyParamsFn,
+  ParamsOptions,
+  InferAllParams,
+  InferAllContext,
+  LooseReturnType,
+  LooseAsyncReturnType,
+  ContextReturnType,
+  ContextAsyncReturnType,
+  ResolveLoaderData,
+  ResolveRouteContext,
+  SearchSerializer,
+  SearchParser,
+  TrailingSlashOption,
+  Manifest,
+  RouterManagedTag,
+  ControlledPromise,
+  Constrain,
+  Expand,
+  MergeAll,
+  Assign,
+  IntersectAssign,
+  ResolveValidatorInput,
+  ResolveValidatorOutput,
+  Register,
+  AnyValidator,
+  DefaultValidator,
+  ValidatorFn,
+  AnySchema,
+  AnyValidatorAdapter,
+  AnyValidatorFn,
+  AnyValidatorObj,
+  ResolveValidatorInputFn,
+  ResolveValidatorOutputFn,
+  ResolveSearchValidatorInput,
+  ResolveSearchValidatorInputFn,
+  Validator,
+  ValidatorAdapter,
+  ValidatorObj,
+  FileRoutesByPath,
+  RouteById,
+  RootRouteOptions,
+  CreateFileRoute,
+  SerializationAdapter,
+  AnySerializationAdapter,
+  SerializableExtensions,
+} from '@tanstack/router-core'
+
+export {
+  createHistory,
+  createBrowserHistory,
+  createHashHistory,
+  createMemoryHistory,
+} from '@tanstack/history'
+
+export type {
+  BlockerFn,
+  HistoryLocation,
+  RouterHistory,
+  ParsedPath,
+  HistoryState,
+} from '@tanstack/history'
+
+export { useAwaited, Await } from './awaited'
+export type { AwaitOptions } from './awaited'
+
+export { CatchBoundary, ErrorComponent } from './CatchBoundary'
+export { Suspense } from './Suspense'
+export { ClientOnly, useHydrated } from './ClientOnly'
+
+export {
+  FileRoute,
+  createFileRoute,
+  FileRouteLoader,
+  LazyRoute,
+  createLazyRoute,
+  createLazyFileRoute,
+} from './fileRoute'
+
+export * from './history'
+
+export { lazyRouteComponent } from './lazyRouteComponent'
+
+export { useLinkProps, createLink, Link, linkOptions } from './link'
+export type {
+  InferDescendantToPaths,
+  RelativeToPath,
+  RelativeToParentPath,
+  RelativeToCurrentPath,
+  AbsoluteToPath,
+  RelativeToPathAutoComplete,
+  NavigateOptions,
+  ToOptions,
+  ToMaskOptions,
+  ToSubOptions,
+  ResolveRoute,
+  SearchParamOptions,
+  PathParamOptions,
+  ToPathOption,
+  LinkOptions,
+  MakeOptionalPathParams,
+  FileRouteTypes,
+  RouteContextParameter,
+  BeforeLoadContextParameter,
+  ResolveAllContext,
+  ResolveAllParamsFromParent,
+  ResolveFullSearchSchema,
+  ResolveFullSearchSchemaInput,
+  RouteIds,
+  NavigateFn,
+  BuildLocationFn,
+  FullSearchSchemaOption,
+  MakeRemountDepsOptionsUnion,
+  RemountDepsOptions,
+  ResolveFullPath,
+  AnyRouteWithContext,
+  AnyRouterWithContext,
+  CommitLocationOptions,
+  MatchLocation,
+  UseNavigateResult,
+  AnyRedirect,
+  Redirect,
+  RedirectOptions,
+  ResolvedRedirect,
+  MakeRouteMatch,
+  MakeRouteMatchUnion,
+  RouteMatch,
+  AnyRouteMatch,
+  RouteContextFn,
+  RouteContextOptions,
+  BeforeLoadContextOptions,
+  ContextOptions,
+  RouteOptions,
+  FileBaseRouteOptions,
+  BaseRouteOptions,
+  UpdatableRouteOptions,
+  RouteLoaderFn,
+  LoaderFnContext,
+  LazyRouteOptions,
+  AnyRouter,
+  RegisteredRouter,
+  RouterContextOptions,
+  ControllablePromise,
+  InjectedHtmlEntry,
+  RouterOptions,
+  RouterState,
+  ListenerFn,
+  BuildNextOptions,
+  RouterConstructorOptions,
+  RouterEvents,
+  RouterEvent,
+  RouterListener,
+  RouteConstraints,
+  RouteMask,
+  MatchRouteOptions,
+  CreateLazyFileRoute,
+} from '@tanstack/router-core'
+export type {
+  UseLinkPropsOptions,
+  ActiveLinkOptions,
+  LinkProps,
+  LinkComponent,
+  LinkComponentProps,
+  CreateLinkProps,
+} from './link'
+
+export {
+  Matches,
+  useMatchRoute,
+  MatchRoute,
+  useMatches,
+  useParentMatches,
+  useChildMatches,
+} from './Matches'
+
+export type { UseMatchRouteOptions, MakeMatchRouteOptions } from './Matches'
+
+export { matchContext } from './matchContext'
+export { Match, Outlet } from './Match'
+
+export { useMatch } from './useMatch'
+export { useLoaderDeps } from './useLoaderDeps'
+export { useLoaderData } from './useLoaderData'
+
+export {
+  redirect,
+  isRedirect,
+  createRouterConfig,
+  DEFAULT_PROTOCOL_ALLOWLIST,
+} from '@tanstack/router-core'
+
+export {
+  RouteApi,
+  getRouteApi,
+  Route,
+  createRoute,
+  RootRoute,
+  rootRouteWithContext,
+  createRootRoute,
+  createRootRouteWithContext,
+  createRouteMask,
+  NotFoundRoute,
+} from './route'
+export type {
+  AnyRootRoute,
+  AsyncRouteComponent,
+  RouteComponent,
+  ErrorRouteComponent,
+  NotFoundRouteComponent,
+  DefaultRouteTypes,
+  RouteTypes,
+} from './route'
+
+export { createRouter, Router } from './router'
+
+export {
+  componentTypes,
+  lazyFn,
+  SearchParamError,
+  PathParamError,
+  getInitialRouterState,
+} from '@tanstack/router-core'
+
+export { RouterProvider, RouterContextProvider } from './RouterProvider'
+export type { RouterProps } from './RouterProvider'
+
+export {
+  useElementScrollRestoration,
+  ScrollRestoration,
+} from './ScrollRestoration'
+
+export type { UseBlockerOpts, ShouldBlockFn } from './useBlocker'
+export { useBlocker, Block } from './useBlocker'
+
+export { useNavigate, Navigate } from './useNavigate'
+
+export { useParams } from './useParams'
+export { useSearch } from './useSearch'
+
+export {
+  getRouterContext, // SSR
+} from './routerContext'
+
+export { useRouteContext } from './useRouteContext'
+export { useRouter } from './useRouter'
+export { useRouterState } from './useRouterState'
+export { useLocation } from './useLocation'
+export { useCanGoBack } from './useCanGoBack'
+
+export {
+  useLayoutEffect, // SSR
+  useStableCallback,
+} from './utils'
+
+export { CatchNotFound, DefaultGlobalNotFound } from './not-found'
+export { notFound, isNotFound } from '@tanstack/router-core'
+export type { NotFoundError } from '@tanstack/router-core'
+
+export type {
+  ValidateLinkOptions,
+  InferStructuralSharing,
+  ValidateUseSearchOptions,
+  ValidateUseParamsOptions,
+  ValidateLinkOptionsArray,
+} from './typePrimitives'
+
+export type {
+  ValidateFromPath,
+  ValidateToPath,
+  ValidateSearch,
+  ValidateParams,
+  InferFrom,
+  InferTo,
+  InferMaskTo,
+  InferMaskFrom,
+  ValidateNavigateOptions,
+  ValidateNavigateOptionsArray,
+  ValidateRedirectOptions,
+  ValidateRedirectOptionsArray,
+  ValidateId,
+  InferStrict,
+  InferShouldThrow,
+  InferSelected,
+  ValidateUseSearchResult,
+  ValidateUseParamsResult,
+} from '@tanstack/router-core'
+
+export { ScriptOnce } from './ScriptOnce'
+export { Asset } from './Asset'
+export { HeadContent } from './HeadContent'
+export { useTags } from './headContentUtils'
+export { Scripts } from './Scripts'
+export type * from './ssr/serializer'
+export { composeRewrites } from '@tanstack/router-core'
+export type {
+  LocationRewrite,
+  LocationRewriteFunction,
+} from '@tanstack/router-core'
diff --git a/packages/preact-router/src/lazyRouteComponent.tsx b/packages/preact-router/src/lazyRouteComponent.tsx
new file mode 100644
index 00000000000..30f0b887edf
--- /dev/null
+++ b/packages/preact-router/src/lazyRouteComponent.tsx
@@ -0,0 +1,70 @@
+import { h } from 'preact'
+import { isModuleNotFoundError } from '@tanstack/router-core'
+import type { AsyncRouteComponent } from './route'
+
+/**
+ * Wrap a dynamic import to create a route component that supports
+ * `.preload()` and friendly reload-on-module-missing behavior.
+ */
+export function lazyRouteComponent<
+  T extends Record<string, any>,
+  TKey extends keyof T = 'default',
+>(
+  importer: () => Promise<T>,
+  exportName?: TKey,
+): T[TKey] extends (props: infer TProps) => any
+  ? AsyncRouteComponent<TProps>
+  : never {
+  let loadPromise: Promise<any> | undefined
+  let comp: T[TKey] | T['default']
+  let error: any
+  let reload: boolean
+
+  const load = () => {
+    if (!loadPromise) {
+      loadPromise = importer()
+        .then((res) => {
+          loadPromise = undefined
+          comp = res[exportName ?? 'default']
+        })
+        .catch((err) => {
+          error = err
+          if (isModuleNotFoundError(error)) {
+            if (
+              error instanceof Error &&
+              typeof window !== 'undefined' &&
+              typeof sessionStorage !== 'undefined'
+            ) {
+              const storageKey = `tanstack_router_reload:${error.message}`
+              if (!sessionStorage.getItem(storageKey)) {
+                sessionStorage.setItem(storageKey, '1')
+                reload = true
+              }
+            }
+          }
+        })
+    }
+
+    return loadPromise
+  }
+
+  const lazyComp = function Lazy(props: any) {
+    if (reload) {
+      window.location.reload()
+      throw new Promise(() => {})
+    }
+    if (error) {
+      throw error
+    }
+
+    if (!comp) {
+      throw load()
+    }
+
+    return h(comp as any, props)
+  }
+
+  ;(lazyComp as any).preload = load
+
+  return lazyComp as any
+}
diff --git a/packages/preact-router/src/link.tsx b/packages/preact-router/src/link.tsx
new file mode 100644
index 00000000000..efb8d1059ff
--- /dev/null
+++ b/packages/preact-router/src/link.tsx
@@ -0,0 +1,805 @@
+import { h } from 'preact'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import {
+  deepEqual,
+  exactPathTest,
+  functionalUpdate,
+  isDangerousProtocol,
+  preloadWarning,
+  removeTrailingSlash,
+} from '@tanstack/router-core'
+import { isServer } from '@tanstack/router-core/isServer'
+import { useRouterState } from './useRouterState'
+import { useRouter } from './useRouter'
+
+import { useIntersectionObserver } from './utils'
+
+import { useHydrated } from './ClientOnly'
+import type {
+  AnyRouter,
+  Constrain,
+  LinkOptions,
+  RegisteredRouter,
+  RoutePaths,
+} from '@tanstack/router-core'
+import type { ComponentChildren, RefObject, VNode } from 'preact'
+import type { JSX } from 'preact/jsx-runtime'
+import type {
+  ValidateLinkOptions,
+  ValidateLinkOptionsArray,
+} from './typePrimitives'
+
+/**
+ * Build anchor-like props for declarative navigation and preloading.
+ */
+export function useLinkProps<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string = string,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
+>(
+  options: UseLinkPropsOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
+  forwardedRef?: RefObject<Element>,
+): any {
+  const router = useRouter()
+  const innerRef = forwardedRef ?? useRef<Element>(null) as RefObject<any>
+
+  const _isServer = isServer ?? router.isServer
+
+  const {
+    // custom props
+    activeProps,
+    inactiveProps,
+    activeOptions,
+    to,
+    preload: userPreload,
+    preloadDelay: userPreloadDelay,
+    hashScrollIntoView,
+    replace,
+    startTransition,
+    resetScroll,
+    viewTransition,
+    // element props
+    children,
+    target,
+    disabled,
+    style,
+    className,
+    onClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchStart,
+    ignoreBlocker,
+    // prevent these from being returned
+    params: _params,
+    search: _search,
+    hash: _hash,
+    state: _state,
+    mask: _mask,
+    reloadDocument: _reloadDocument,
+    unsafeRelative: _unsafeRelative,
+    from: _from,
+    _fromLocation,
+    ...propsSafeToSpread
+  } = options
+
+  // SERVER EARLY RETURN
+  if (_isServer) {
+    const safeInternal = isSafeInternal(to)
+
+    if (
+      typeof to === 'string' &&
+      !safeInternal &&
+      to.indexOf(':') > -1
+    ) {
+      try {
+        new URL(to)
+        if (isDangerousProtocol(to, router.protocolAllowlist)) {
+          if (process.env.NODE_ENV !== 'production') {
+            console.warn(`Blocked Link with dangerous protocol: ${to}`)
+          }
+          return {
+            ...propsSafeToSpread,
+            ref: innerRef,
+            href: undefined,
+            ...(children && { children }),
+            ...(target && { target }),
+            ...(disabled && { disabled }),
+            ...(style && { style }),
+            ...(className && { className }),
+          }
+        }
+
+        return {
+          ...propsSafeToSpread,
+          ref: innerRef,
+          href: to,
+          ...(children && { children }),
+          ...(target && { target }),
+          ...(disabled && { disabled }),
+          ...(style && { style }),
+          ...(className && { className }),
+        }
+      } catch {
+        // Not an absolute URL
+      }
+    }
+
+    const next = router.buildLocation({ ...options, from: options.from } as any)
+
+    const hrefOptionPublicHref = next.maskedLocation
+      ? next.maskedLocation.publicHref
+      : next.publicHref
+    const hrefOptionExternal = next.maskedLocation
+      ? next.maskedLocation.external
+      : next.external
+    const hrefOption = getHrefOption(
+      hrefOptionPublicHref,
+      hrefOptionExternal,
+      router.history,
+      disabled,
+    )
+
+    const externalLink = (() => {
+      if (hrefOption?.external) {
+        if (isDangerousProtocol(hrefOption.href, router.protocolAllowlist)) {
+          return undefined
+        }
+        return hrefOption.href
+      }
+
+      if (safeInternal) return undefined
+
+      if (typeof to === 'string' && to.indexOf(':') > -1) {
+        try {
+          new URL(to)
+          if (isDangerousProtocol(to, router.protocolAllowlist)) {
+            return undefined
+          }
+          return to
+        } catch {}
+      }
+
+      return undefined
+    })()
+
+    const isActive = (() => {
+      if (externalLink) return false
+
+      const currentLocation = router.state.location
+      const exact = activeOptions?.exact ?? false
+
+      if (exact) {
+        const testExact = exactPathTest(
+          currentLocation.pathname,
+          next.pathname,
+          router.basepath,
+        )
+        if (!testExact) return false
+      } else {
+        const currentPathSplit = removeTrailingSlash(
+          currentLocation.pathname,
+          router.basepath,
+        )
+        const nextPathSplit = removeTrailingSlash(
+          next.pathname,
+          router.basepath,
+        )
+
+        const pathIsFuzzyEqual =
+          currentPathSplit.startsWith(nextPathSplit) &&
+          (currentPathSplit.length === nextPathSplit.length ||
+            currentPathSplit[nextPathSplit.length] === '/')
+
+        if (!pathIsFuzzyEqual) return false
+      }
+
+      const includeSearch = activeOptions?.includeSearch ?? true
+      if (includeSearch) {
+        if (currentLocation.search !== next.search) {
+          const currentSearchEmpty =
+            !currentLocation.search ||
+            (typeof currentLocation.search === 'object' &&
+              Object.keys(currentLocation.search).length === 0)
+          const nextSearchEmpty =
+            !next.search ||
+            (typeof next.search === 'object' &&
+              Object.keys(next.search).length === 0)
+
+          if (!(currentSearchEmpty && nextSearchEmpty)) {
+            const searchTest = deepEqual(currentLocation.search, next.search, {
+              partial: !exact,
+              ignoreUndefined: !activeOptions?.explicitUndefined,
+            })
+            if (!searchTest) return false
+          }
+        }
+      }
+
+      if (activeOptions?.includeHash) return false
+      return true
+    })()
+
+    if (externalLink) {
+      return {
+        ...propsSafeToSpread,
+        ref: innerRef,
+        href: externalLink,
+        ...(children && { children }),
+        ...(target && { target }),
+        ...(disabled && { disabled }),
+        ...(style && { style }),
+        ...(className && { className }),
+      }
+    }
+
+    const resolvedActiveProps: any =
+      isActive
+        ? (functionalUpdate(activeProps as any, {}) ?? STATIC_ACTIVE_OBJECT)
+        : STATIC_EMPTY_OBJECT
+
+    const resolvedInactiveProps: any =
+      isActive
+        ? STATIC_EMPTY_OBJECT
+        : (functionalUpdate(inactiveProps, {}) ?? STATIC_EMPTY_OBJECT)
+
+    const resolvedStyle = (() => {
+      const baseStyle = style
+      const activeStyle = resolvedActiveProps.style
+      const inactiveStyle = resolvedInactiveProps.style
+
+      if (!baseStyle && !activeStyle && !inactiveStyle) return undefined
+      if (baseStyle && !activeStyle && !inactiveStyle) return baseStyle
+      if (!baseStyle && activeStyle && !inactiveStyle) return activeStyle
+      if (!baseStyle && !activeStyle && inactiveStyle) return inactiveStyle
+
+      return {
+        ...(baseStyle as any),
+        ...(activeStyle),
+        ...(inactiveStyle),
+      }
+    })()
+
+    const resolvedClassName = (() => {
+      const baseClassName = className
+      const activeClassName = resolvedActiveProps.className
+      const inactiveClassName = resolvedInactiveProps.className
+
+      if (!baseClassName && !activeClassName && !inactiveClassName) return ''
+
+      let out = ''
+      if (baseClassName) out = baseClassName as string
+      if (activeClassName) out = out ? `${out} ${activeClassName}` : activeClassName
+      if (inactiveClassName) out = out ? `${out} ${inactiveClassName}` : inactiveClassName
+      return out
+    })()
+
+    return {
+      ...propsSafeToSpread,
+      ...resolvedActiveProps,
+      ...resolvedInactiveProps,
+      href: hrefOption?.href,
+      ref: innerRef,
+      disabled: !!disabled,
+      target,
+      ...(resolvedStyle && { style: resolvedStyle }),
+      ...(resolvedClassName && { className: resolvedClassName }),
+      ...(disabled && STATIC_DISABLED_PROPS),
+      ...(isActive && STATIC_ACTIVE_PROPS),
+    }
+  }
+
+  // CLIENT-ONLY CODE
+  const isHydrated = useHydrated()
+
+  const currentSearch = useRouterState({
+    select: (s) => s.location.search,
+    structuralSharing: true as any,
+  })
+
+  const from = options.from
+
+  const _options = useMemo(
+    () => {
+      return { ...options, from }
+    },
+    [
+      router,
+      currentSearch,
+      from,
+      options._fromLocation,
+      options.hash,
+      options.to,
+      options.search,
+      options.params,
+      options.state,
+      options.mask,
+      options.unsafeRelative,
+    ],
+  )
+
+  const next = useMemo(
+    () => router.buildLocation({ ..._options } as any),
+    [router, _options],
+  )
+
+  const hrefOptionPublicHref = next.maskedLocation
+    ? next.maskedLocation.publicHref
+    : next.publicHref
+  const hrefOptionExternal = next.maskedLocation
+    ? next.maskedLocation.external
+    : next.external
+  const hrefOption = useMemo(
+    () =>
+      getHrefOption(
+        hrefOptionPublicHref,
+        hrefOptionExternal,
+        router.history,
+        disabled,
+      ),
+    [disabled, hrefOptionExternal, hrefOptionPublicHref, router.history],
+  )
+
+  const externalLink = useMemo(() => {
+    if (hrefOption?.external) {
+      if (isDangerousProtocol(hrefOption.href, router.protocolAllowlist)) {
+        return undefined
+      }
+      return hrefOption.href
+    }
+    const safeInternal = isSafeInternal(to)
+    if (safeInternal) return undefined
+    if (typeof to !== 'string' || to.indexOf(':') === -1) return undefined
+    try {
+      new URL(to as any)
+      if (isDangerousProtocol(to, router.protocolAllowlist)) {
+        return undefined
+      }
+      return to
+    } catch {}
+    return undefined
+  }, [to, hrefOption, router.protocolAllowlist])
+
+  const isActive = useRouterState({
+    select: (s) => {
+      if (externalLink) return false
+      if (activeOptions?.exact) {
+        const testExact = exactPathTest(
+          s.location.pathname,
+          next.pathname,
+          router.basepath,
+        )
+        if (!testExact) return false
+      } else {
+        const currentPathSplit = removeTrailingSlash(
+          s.location.pathname,
+          router.basepath,
+        )
+        const nextPathSplit = removeTrailingSlash(
+          next.pathname,
+          router.basepath,
+        )
+
+        const pathIsFuzzyEqual =
+          currentPathSplit.startsWith(nextPathSplit) &&
+          (currentPathSplit.length === nextPathSplit.length ||
+            currentPathSplit[nextPathSplit.length] === '/')
+
+        if (!pathIsFuzzyEqual) return false
+      }
+
+      if (activeOptions?.includeSearch ?? true) {
+        const searchTest = deepEqual(s.location.search, next.search, {
+          partial: !activeOptions?.exact,
+          ignoreUndefined: !activeOptions?.explicitUndefined,
+        })
+        if (!searchTest) return false
+      }
+
+      if (activeOptions?.includeHash) {
+        return isHydrated && s.location.hash === next.hash
+      }
+      return true
+    },
+  })
+
+  const resolvedActiveProps: any = isActive
+    ? (functionalUpdate(activeProps as any, {}) ?? STATIC_ACTIVE_OBJECT)
+    : STATIC_EMPTY_OBJECT
+
+  const resolvedInactiveProps: any =
+    isActive
+      ? STATIC_EMPTY_OBJECT
+      : (functionalUpdate(inactiveProps, {}) ?? STATIC_EMPTY_OBJECT)
+
+  const resolvedClassName = [
+    className,
+    resolvedActiveProps.className,
+    resolvedInactiveProps.className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const resolvedStyle = (style ||
+    resolvedActiveProps.style ||
+    resolvedInactiveProps.style) && {
+    ...(style as any),
+    ...(resolvedActiveProps.style),
+    ...(resolvedInactiveProps.style),
+  }
+
+  const [isTransitioning, setIsTransitioning] = useState(false)
+  const hasRenderFetched = useRef(false)
+
+  const preload =
+    options.reloadDocument || externalLink
+      ? false
+      : (userPreload ?? router.options.defaultPreload)
+  const preloadDelay =
+    userPreloadDelay ?? router.options.defaultPreloadDelay ?? 0
+
+  const doPreload = useCallback(() => {
+    router.preloadRoute({ ..._options } as any).catch((err) => {
+      console.warn(err)
+      console.warn(preloadWarning)
+    })
+  }, [router, _options])
+
+  const preloadViewportIoCallback = useCallback(
+    (entry: IntersectionObserverEntry | undefined) => {
+      if (entry?.isIntersecting) {
+        doPreload()
+      }
+    },
+    [doPreload],
+  )
+
+  useIntersectionObserver(
+    innerRef as RefObject<Element>,
+    preloadViewportIoCallback,
+    intersectionObserverOptions,
+    { disabled: !!disabled || !(preload === 'viewport') },
+  )
+
+  useEffect(() => {
+    if (hasRenderFetched.current) {
+      return
+    }
+    if (!disabled && preload === 'render') {
+      doPreload()
+      hasRenderFetched.current = true
+    }
+  }, [disabled, doPreload, preload])
+
+  // The click handler - no flushSync in Preact, use synchronous setState
+  const handleClick = (e: MouseEvent) => {
+    const elementTarget = (
+      e.currentTarget as HTMLAnchorElement | SVGAElement
+    ).getAttribute('target')
+    const effectiveTarget = target !== undefined ? target : elementTarget
+
+    if (
+      !disabled &&
+      !isCtrlEvent(e) &&
+      !e.defaultPrevented &&
+      (!effectiveTarget || effectiveTarget === '_self') &&
+      e.button === 0
+    ) {
+      e.preventDefault()
+
+      setIsTransitioning(true)
+
+      const unsub = router.subscribe('onResolved', () => {
+        unsub()
+        setIsTransitioning(false)
+      })
+
+      router.navigate({
+        ..._options,
+        replace,
+        resetScroll,
+        hashScrollIntoView,
+        startTransition,
+        viewTransition,
+        ignoreBlocker,
+      })
+    }
+  }
+
+  if (externalLink) {
+    return {
+      ...propsSafeToSpread,
+      ref: innerRef,
+      href: externalLink,
+      ...(children && { children }),
+      ...(target && { target }),
+      ...(disabled && { disabled }),
+      ...(style && { style }),
+      ...(className && { className }),
+      ...(onClick && { onClick }),
+      ...(onFocus && { onFocus }),
+      ...(onMouseEnter && { onMouseEnter }),
+      ...(onMouseLeave && { onMouseLeave }),
+      ...(onTouchStart && { onTouchStart }),
+    }
+  }
+
+  const handleFocus = (_: FocusEvent) => {
+    if (disabled) return
+    if (preload) {
+      doPreload()
+    }
+  }
+
+  const handleTouchStart = handleFocus as any
+
+  const handleEnter = (e: MouseEvent) => {
+    if (disabled || !preload) return
+
+    if (!preloadDelay) {
+      doPreload()
+    } else {
+      const eventTarget = e.target as EventTarget
+      if (timeoutMap.has(eventTarget)) {
+        return
+      }
+      const id = setTimeout(() => {
+        timeoutMap.delete(eventTarget)
+        doPreload()
+      }, preloadDelay)
+      timeoutMap.set(eventTarget, id)
+    }
+  }
+
+  const handleLeave = (e: MouseEvent) => {
+    if (disabled || !preload || !preloadDelay) return
+    const eventTarget = e.target as EventTarget
+    const id = timeoutMap.get(eventTarget)
+    if (id) {
+      clearTimeout(id)
+      timeoutMap.delete(eventTarget)
+    }
+  }
+
+  return {
+    ...propsSafeToSpread,
+    ...resolvedActiveProps,
+    ...resolvedInactiveProps,
+    href: hrefOption?.href,
+    ref: innerRef,
+    onClick: composeHandlers([onClick, handleClick]),
+    onFocus: composeHandlers([onFocus, handleFocus]),
+    onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
+    onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
+    onTouchStart: composeHandlers([onTouchStart, handleTouchStart]),
+    disabled: !!disabled,
+    target,
+    ...(resolvedStyle && { style: resolvedStyle }),
+    ...(resolvedClassName && { className: resolvedClassName }),
+    ...(disabled && STATIC_DISABLED_PROPS),
+    ...(isActive && STATIC_ACTIVE_PROPS),
+    ...(isHydrated && isTransitioning && STATIC_TRANSITIONING_PROPS),
+  }
+}
+
+const STATIC_EMPTY_OBJECT = {}
+const STATIC_ACTIVE_OBJECT = { className: 'active' }
+const STATIC_DISABLED_PROPS = { role: 'link', 'aria-disabled': true }
+const STATIC_ACTIVE_PROPS = { 'data-status': 'active', 'aria-current': 'page' }
+const STATIC_TRANSITIONING_PROPS = { 'data-transitioning': 'transitioning' }
+
+const timeoutMap = new WeakMap<EventTarget, ReturnType<typeof setTimeout>>()
+
+const intersectionObserverOptions: IntersectionObserverInit = {
+  rootMargin: '100px',
+}
+
+const composeHandlers =
+  (handlers: Array<undefined | ((e: any) => void)>) =>
+  (e: Event) => {
+    for (const handler of handlers) {
+      if (!handler) continue
+      if (e.defaultPrevented) return
+      handler(e)
+    }
+  }
+
+function getHrefOption(
+  publicHref: string,
+  external: boolean,
+  history: AnyRouter['history'],
+  disabled: boolean | undefined,
+) {
+  if (disabled) return undefined
+  if (external) {
+    return { href: publicHref, external: true }
+  }
+  return {
+    href: history.createHref(publicHref) || '/',
+    external: false,
+  }
+}
+
+function isSafeInternal(to: unknown) {
+  if (typeof to !== 'string') return false
+  const zero = to.charCodeAt(0)
+  if (zero === 47) return to.charCodeAt(1) !== 47 // '/' but not '//'
+  return zero === 46 // '.', '..', './', '../'
+}
+
+type UseLinkReactProps<TComp> = TComp extends keyof JSX.IntrinsicElements
+  ? JSX.IntrinsicElements[TComp]
+  : TComp extends (props: infer P) => any
+    ? P
+    : never
+
+export type UseLinkPropsOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,
+  TTo extends string | undefined = '.',
+  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
+  TMaskTo extends string = '.',
+> = ActiveLinkOptions<'a', TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
+  UseLinkReactProps<'a'>
+
+export type ActiveLinkOptions<
+  TComp = 'a',
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends string = string,
+  TTo extends string | undefined = '.',
+  TMaskFrom extends string = TFrom,
+  TMaskTo extends string = '.',
+> = LinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
+  ActiveLinkOptionProps<TComp>
+
+type ActiveLinkProps<TComp> = Partial<
+  LinkComponentReactProps<TComp> & {
+    [key: `data-${string}`]: unknown
+  }
+>
+
+export interface ActiveLinkOptionProps<TComp = 'a'> {
+  activeProps?: ActiveLinkProps<TComp> | (() => ActiveLinkProps<TComp>)
+  inactiveProps?: ActiveLinkProps<TComp> | (() => ActiveLinkProps<TComp>)
+}
+
+export type LinkProps<
+  TComp = 'a',
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends string = string,
+  TTo extends string | undefined = '.',
+  TMaskFrom extends string = TFrom,
+  TMaskTo extends string = '.',
+> = ActiveLinkOptions<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
+  LinkPropsChildren
+
+export interface LinkPropsChildren {
+  children?:
+    | ComponentChildren
+    | ((state: {
+        isActive: boolean
+        isTransitioning: boolean
+      }) => ComponentChildren)
+}
+
+type LinkComponentReactProps<TComp> = Omit<
+  UseLinkReactProps<TComp>,
+  keyof CreateLinkProps
+>
+
+export type LinkComponentProps<
+  TComp = 'a',
+  TRouter extends AnyRouter = RegisteredRouter,
+  TFrom extends string = string,
+  TTo extends string | undefined = '.',
+  TMaskFrom extends string = TFrom,
+  TMaskTo extends string = '.',
+> = LinkComponentReactProps<TComp> &
+  LinkProps<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo>
+
+export type CreateLinkProps = LinkProps<
+  any,
+  any,
+  string,
+  string,
+  string,
+  string
+>
+
+export type LinkComponent<
+  in out TComp,
+  in out TDefaultFrom extends string = string,
+> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string = TDefaultFrom,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
+>(
+  props: LinkComponentProps<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
+) => VNode | null
+
+export interface LinkComponentRoute<
+  in out TDefaultFrom extends string = string,
+> {
+  defaultFrom: TDefaultFrom;
+  <
+    TRouter extends AnyRouter = RegisteredRouter,
+    const TTo extends string | undefined = undefined,
+    const TMaskTo extends string = '',
+  >(
+    props: LinkComponentProps<
+      'a',
+      TRouter,
+      this['defaultFrom'],
+      TTo,
+      this['defaultFrom'],
+      TMaskTo
+    >,
+  ): VNode | null
+}
+
+/**
+ * Creates a typed Link-like component.
+ * No forwardRef needed in Preact - ref is a regular prop.
+ */
+export function createLink<const TComp>(
+  Comp: Constrain<TComp, any, (props: CreateLinkProps) => ComponentChildren>,
+): LinkComponent<TComp> {
+  return function CreatedLink(props: any) {
+    return <Link {...props} _asChild={Comp} />
+  } as any
+}
+
+/**
+ * A strongly-typed anchor component for declarative navigation.
+ * No forwardRef in native Preact - ref is passed as a regular prop.
+ */
+export const Link: LinkComponent<'a'> = function LinkImpl(props: any) {
+  const { _asChild, ref, ...rest } = props
+  const linkProps = useLinkProps(rest, ref)
+  // Remove 'type' if present since it's not a valid anchor attribute
+  const { type: _type, ...cleanLinkProps } = linkProps
+
+  const children =
+    typeof rest.children === 'function'
+      ? rest.children({
+          isActive: (cleanLinkProps)['data-status'] === 'active',
+        })
+      : rest.children
+
+  if (!_asChild) {
+    const { disabled: _, ...rest } = cleanLinkProps
+    return h('a', rest, children)
+  }
+  return h(_asChild, cleanLinkProps, children)
+} as any
+
+function isCtrlEvent(e: MouseEvent) {
+  return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)
+}
+
+export type LinkOptionsFnOptions<
+  TOptions,
+  TComp,
+  TRouter extends AnyRouter = RegisteredRouter,
+> =
+  TOptions extends ReadonlyArray<any>
+    ? ValidateLinkOptionsArray<TRouter, TOptions, string, TComp>
+    : ValidateLinkOptions<TRouter, TOptions, string, TComp>
+
+export type LinkOptionsFn<TComp> = <
+  const TOptions,
+  TRouter extends AnyRouter = RegisteredRouter,
+>(
+  options: LinkOptionsFnOptions<TOptions, TComp, TRouter>,
+) => TOptions
+
+/**
+ * Validate and reuse navigation options for `Link`, `navigate` or `redirect`.
+ */
+export const linkOptions: LinkOptionsFn<'a'> = (options) => {
+  return options as any
+}
diff --git a/packages/preact-router/src/matchContext.tsx b/packages/preact-router/src/matchContext.tsx
new file mode 100644
index 00000000000..9d7d56ec3fb
--- /dev/null
+++ b/packages/preact-router/src/matchContext.tsx
@@ -0,0 +1,6 @@
+import { createContext } from 'preact'
+
+export const matchContext = createContext<string | undefined>(undefined)
+
+// N.B. this only exists so we can conditionally call useContext on it when we are not interested in the nearest match
+export const dummyMatchContext = createContext<string | undefined>(undefined)
diff --git a/packages/preact-router/src/not-found.tsx b/packages/preact-router/src/not-found.tsx
new file mode 100644
index 00000000000..4eb23a7c589
--- /dev/null
+++ b/packages/preact-router/src/not-found.tsx
@@ -0,0 +1,41 @@
+import { isNotFound } from '@tanstack/router-core'
+import { CatchBoundary } from './CatchBoundary'
+import { useRouterState } from './useRouterState'
+import type { NotFoundError } from '@tanstack/router-core'
+import type { ComponentChildren, VNode } from 'preact'
+
+export function CatchNotFound(props: {
+  fallback?: (error: NotFoundError) => VNode | null
+  onCatch?: (error: Error, errorInfo: { componentStack?: string }) => void
+  children: ComponentChildren
+}) {
+  const resetKey = useRouterState({
+    select: (s) => `not-found-${s.location.pathname}-${s.status}`,
+  })
+
+  return (
+    <CatchBoundary
+      getResetKey={() => resetKey}
+      onCatch={(error, errorInfo) => {
+        if (isNotFound(error)) {
+          props.onCatch?.(error, errorInfo)
+        } else {
+          throw error
+        }
+      }}
+      errorComponent={({ error }) => {
+        if (isNotFound(error)) {
+          return props.fallback?.(error) ?? null
+        } else {
+          throw error
+        }
+      }}
+    >
+      {props.children}
+    </CatchBoundary>
+  )
+}
+
+export function DefaultGlobalNotFound() {
+  return <p>Not Found</p>
+}
diff --git a/packages/preact-router/src/renderRouteNotFound.tsx b/packages/preact-router/src/renderRouteNotFound.tsx
new file mode 100644
index 00000000000..5cb0af03feb
--- /dev/null
+++ b/packages/preact-router/src/renderRouteNotFound.tsx
@@ -0,0 +1,30 @@
+import { h } from 'preact'
+import warning from 'tiny-warning'
+import { DefaultGlobalNotFound } from './not-found'
+import type { AnyRoute, AnyRouter } from '@tanstack/router-core'
+
+/**
+ * Renders a not found component for a route when no matching route is found.
+ */
+export function renderRouteNotFound(
+  router: AnyRouter,
+  route: AnyRoute,
+  data: any,
+) {
+  if (!route.options.notFoundComponent) {
+    if (router.options.defaultNotFoundComponent) {
+      return h(router.options.defaultNotFoundComponent, data)
+    }
+
+    if (process.env.NODE_ENV === 'development') {
+      warning(
+        route.options.notFoundComponent,
+        `A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<p>Not Found</p>)`,
+      )
+    }
+
+    return <DefaultGlobalNotFound />
+  }
+
+  return h(route.options.notFoundComponent, data)
+}
diff --git a/packages/preact-router/src/route.tsx b/packages/preact-router/src/route.tsx
new file mode 100644
index 00000000000..e769dd85701
--- /dev/null
+++ b/packages/preact-router/src/route.tsx
@@ -0,0 +1,723 @@
+import {
+  BaseRootRoute,
+  BaseRoute,
+  BaseRouteApi,
+  notFound,
+} from '@tanstack/router-core'
+import { h } from 'preact'
+import { useLoaderData } from './useLoaderData'
+import { useLoaderDeps } from './useLoaderDeps'
+import { useParams } from './useParams'
+import { useSearch } from './useSearch'
+import { useNavigate } from './useNavigate'
+import { useMatch } from './useMatch'
+import { useRouter } from './useRouter'
+import { Link } from './link'
+import type { ComponentChildren, VNode } from 'preact'
+import type {
+  AnyContext,
+  AnyRoute,
+  AnyRouter,
+  ConstrainLiteral,
+  ErrorComponentProps,
+  NotFoundError,
+  NotFoundRouteProps,
+  Register,
+  RegisteredRouter,
+  ResolveFullPath,
+  ResolveId,
+  ResolveParams,
+  RootRoute as RootRouteCore,
+  RootRouteId,
+  RootRouteOptions,
+  RouteConstraints,
+  Route as RouteCore,
+  RouteIds,
+  RouteMask,
+  RouteOptions,
+  RouteTypesById,
+  RouterCore,
+  ToMaskOptions,
+  UseNavigateResult,
+} from '@tanstack/router-core'
+import type { UseLoaderDataRoute } from './useLoaderData'
+import type { UseMatchRoute } from './useMatch'
+import type { UseLoaderDepsRoute } from './useLoaderDeps'
+import type { UseParamsRoute } from './useParams'
+import type { UseSearchRoute } from './useSearch'
+import type { UseRouteContextRoute } from './useRouteContext'
+import type { LinkComponentRoute } from './link'
+
+declare module '@tanstack/router-core' {
+  export interface UpdatableRouteOptionsExtensions {
+    component?: RouteComponent
+    errorComponent?: false | null | undefined | ErrorRouteComponent
+    notFoundComponent?: NotFoundRouteComponent
+    pendingComponent?: RouteComponent
+  }
+
+  export interface RootRouteOptionsExtensions {
+    shellComponent?: ({
+      children,
+    }: {
+      children: ComponentChildren
+    }) => VNode | null
+  }
+
+  export interface RouteExtensions<
+    in out TId extends string,
+    in out TFullPath extends string,
+  > {
+    useMatch: UseMatchRoute<TId>
+    useRouteContext: UseRouteContextRoute<TId>
+    useSearch: UseSearchRoute<TId>
+    useParams: UseParamsRoute<TId>
+    useLoaderDeps: UseLoaderDepsRoute<TId>
+    useLoaderData: UseLoaderDataRoute<TId>
+    useNavigate: () => UseNavigateResult<TFullPath>
+    Link: LinkComponentRoute<TFullPath>
+  }
+}
+
+/**
+ * Returns a route-specific API that exposes type-safe hooks pre-bound
+ * to a single route ID. Useful for consuming a route's APIs from files
+ * where the route object isn't directly imported (e.g. code-split files).
+ *
+ * @param id Route ID string literal for the target route.
+ * @returns A `RouteApi` instance bound to the given route ID.
+ */
+export function getRouteApi<
+  const TId,
+  TRouter extends AnyRouter = RegisteredRouter,
+>(id: ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>) {
+  return new RouteApi<TId, TRouter>({ id })
+}
+
+export class RouteApi<
+  TId,
+  TRouter extends AnyRouter = RegisteredRouter,
+> extends BaseRouteApi<TId, TRouter> {
+  /**
+   * @deprecated Use the `getRouteApi` function instead.
+   */
+  constructor({ id }: { id: TId }) {
+    super({ id })
+  }
+
+  useMatch: UseMatchRoute<TId> = (opts) => {
+    return useMatch({
+      select: opts?.select,
+      from: this.id,
+      structuralSharing: opts?.structuralSharing,
+    } as any) as any
+  }
+
+  useRouteContext: UseRouteContextRoute<TId> = (opts) => {
+    return useMatch({
+      from: this.id as any,
+      select: (d) => (opts?.select ? opts.select(d.context) : d.context),
+    }) as any
+  }
+
+  useSearch: UseSearchRoute<TId> = (opts) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    return useSearch({
+      select: opts?.select,
+      structuralSharing: opts?.structuralSharing,
+      from: this.id,
+    } as any) as any
+  }
+
+  useParams: UseParamsRoute<TId> = (opts) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    return useParams({
+      select: opts?.select,
+      structuralSharing: opts?.structuralSharing,
+      from: this.id,
+    } as any) as any
+  }
+
+  useLoaderDeps: UseLoaderDepsRoute<TId> = (opts) => {
+    return useLoaderDeps({ ...opts, from: this.id, strict: false } as any)
+  }
+
+  useLoaderData: UseLoaderDataRoute<TId> = (opts) => {
+    return useLoaderData({ ...opts, from: this.id, strict: false } as any)
+  }
+
+  useNavigate = (): UseNavigateResult<
+    RouteTypesById<TRouter, TId>['fullPath']
+  > => {
+    const router = useRouter()
+    return useNavigate({ from: router.routesById[this.id as string].fullPath })
+  }
+
+  notFound = (opts?: NotFoundError) => {
+    return notFound({ routeId: this.id as string, ...opts })
+  }
+
+  // No forwardRef in Preact - Link is a plain function component
+  Link: LinkComponentRoute<RouteTypesById<TRouter, TId>['fullPath']> =
+    ((props: any) => {
+      const router = useRouter()
+      const fullPath = router.routesById[this.id as string].fullPath
+      return h(Link as any, { from: fullPath as never, ...props })
+    }) as unknown as LinkComponentRoute<
+      RouteTypesById<TRouter, TId>['fullPath']
+    >
+}
+
+export class Route<
+  in out TRegister = unknown,
+  in out TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,
+  in out TPath extends RouteConstraints['TPath'] = '/',
+  in out TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<
+    TParentRoute,
+    TPath
+  >,
+  in out TCustomId extends RouteConstraints['TCustomId'] = string,
+  in out TId extends RouteConstraints['TId'] = ResolveId<
+    TParentRoute,
+    TCustomId,
+    TPath
+  >,
+  in out TSearchValidator = undefined,
+  in out TParams = ResolveParams<TPath>,
+  in out TRouterContext = AnyContext,
+  in out TRouteContextFn = AnyContext,
+  in out TBeforeLoadFn = AnyContext,
+  in out TLoaderDeps extends Record<string, any> = {},
+  in out TLoaderFn = undefined,
+  in out TChildren = unknown,
+  in out TFileRouteTypes = unknown,
+  in out TSSR = unknown,
+  in out TServerMiddlewares = unknown,
+  in out THandlers = undefined,
+>
+  extends BaseRoute<
+    TRegister,
+    TParentRoute,
+    TPath,
+    TFullPath,
+    TCustomId,
+    TId,
+    TSearchValidator,
+    TParams,
+    TRouterContext,
+    TRouteContextFn,
+    TBeforeLoadFn,
+    TLoaderDeps,
+    TLoaderFn,
+    TChildren,
+    TFileRouteTypes,
+    TSSR,
+    TServerMiddlewares,
+    THandlers
+  >
+  implements
+    RouteCore<
+      TRegister,
+      TParentRoute,
+      TPath,
+      TFullPath,
+      TCustomId,
+      TId,
+      TSearchValidator,
+      TParams,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      TLoaderDeps,
+      TLoaderFn,
+      TChildren,
+      TFileRouteTypes,
+      TSSR,
+      TServerMiddlewares,
+      THandlers
+    >
+{
+  /**
+   * @deprecated Use the `createRoute` function instead.
+   */
+  constructor(
+    options?: RouteOptions<
+      TRegister,
+      TParentRoute,
+      TId,
+      TCustomId,
+      TFullPath,
+      TPath,
+      TSearchValidator,
+      TParams,
+      TLoaderDeps,
+      TLoaderFn,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      TSSR,
+      TServerMiddlewares,
+      THandlers
+    >,
+  ) {
+    super(options)
+    // No $$typeof = Symbol.for('react.memo') - not needed for Preact
+  }
+
+  useMatch: UseMatchRoute<TId> = (opts) => {
+    return useMatch({
+      select: opts?.select,
+      from: this.id,
+      structuralSharing: opts?.structuralSharing,
+    } as any) as any
+  }
+
+  useRouteContext: UseRouteContextRoute<TId> = (opts?) => {
+    return useMatch({
+      ...opts,
+      from: this.id,
+      select: (d) => (opts?.select ? opts.select(d.context) : d.context),
+    }) as any
+  }
+
+  useSearch: UseSearchRoute<TId> = (opts) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    return useSearch({
+      select: opts?.select,
+      structuralSharing: opts?.structuralSharing,
+      from: this.id,
+    } as any) as any
+  }
+
+  useParams: UseParamsRoute<TId> = (opts) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    return useParams({
+      select: opts?.select,
+      structuralSharing: opts?.structuralSharing,
+      from: this.id,
+    } as any) as any
+  }
+
+  useLoaderDeps: UseLoaderDepsRoute<TId> = (opts) => {
+    return useLoaderDeps({ ...opts, from: this.id } as any)
+  }
+
+  useLoaderData: UseLoaderDataRoute<TId> = (opts) => {
+    return useLoaderData({ ...opts, from: this.id } as any)
+  }
+
+  useNavigate = (): UseNavigateResult<TFullPath> => {
+    return useNavigate({ from: this.fullPath })
+  }
+
+  // No forwardRef in Preact - Link is a plain function component
+  Link: LinkComponentRoute<TFullPath> = ((props: any) => {
+    return h(Link as any, { from: this.fullPath as never, ...props })
+  }) as unknown as LinkComponentRoute<TFullPath>
+}
+
+/**
+ * Creates a non-root Route instance for code-based routing.
+ */
+export function createRoute<
+  TRegister = unknown,
+  TParentRoute extends RouteConstraints['TParentRoute'] = AnyRoute,
+  TPath extends RouteConstraints['TPath'] = '/',
+  TFullPath extends RouteConstraints['TFullPath'] = ResolveFullPath<
+    TParentRoute,
+    TPath
+  >,
+  TCustomId extends RouteConstraints['TCustomId'] = string,
+  TId extends RouteConstraints['TId'] = ResolveId<
+    TParentRoute,
+    TCustomId,
+    TPath
+  >,
+  TSearchValidator = undefined,
+  TParams = ResolveParams<TPath>,
+  TRouteContextFn = AnyContext,
+  TBeforeLoadFn = AnyContext,
+  TLoaderDeps extends Record<string, any> = {},
+  TLoaderFn = undefined,
+  TChildren = unknown,
+  TSSR = unknown,
+  const TServerMiddlewares = unknown,
+>(
+  options: RouteOptions<
+    TRegister,
+    TParentRoute,
+    TId,
+    TCustomId,
+    TFullPath,
+    TPath,
+    TSearchValidator,
+    TParams,
+    TLoaderDeps,
+    TLoaderFn,
+    AnyContext,
+    TRouteContextFn,
+    TBeforeLoadFn,
+    TSSR,
+    TServerMiddlewares
+  >,
+): Route<
+  TRegister,
+  TParentRoute,
+  TPath,
+  TFullPath,
+  TCustomId,
+  TId,
+  TSearchValidator,
+  TParams,
+  AnyContext,
+  TRouteContextFn,
+  TBeforeLoadFn,
+  TLoaderDeps,
+  TLoaderFn,
+  TChildren,
+  TSSR,
+  TServerMiddlewares
+> {
+  return new Route<
+    TRegister,
+    TParentRoute,
+    TPath,
+    TFullPath,
+    TCustomId,
+    TId,
+    TSearchValidator,
+    TParams,
+    AnyContext,
+    TRouteContextFn,
+    TBeforeLoadFn,
+    TLoaderDeps,
+    TLoaderFn,
+    TChildren,
+    TSSR,
+    TServerMiddlewares
+  >(options as any)
+}
+
+export type AnyRootRoute = RootRoute<
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any
+>
+
+/**
+ * Creates a root route factory that requires a router context type.
+ */
+export function createRootRouteWithContext<TRouterContext extends {}>() {
+  return <
+    TRegister = Register,
+    TRouteContextFn = AnyContext,
+    TBeforeLoadFn = AnyContext,
+    TSearchValidator = undefined,
+    TLoaderDeps extends Record<string, any> = {},
+    TLoaderFn = undefined,
+    TSSR = unknown,
+    TServerMiddlewares = unknown,
+  >(
+    options?: RootRouteOptions<
+      TRegister,
+      TSearchValidator,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      TLoaderDeps,
+      TLoaderFn,
+      TSSR,
+      TServerMiddlewares
+    >,
+  ) => {
+    return createRootRoute<
+      TRegister,
+      TSearchValidator,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      TLoaderDeps,
+      TLoaderFn,
+      TSSR,
+      TServerMiddlewares
+    >(options as any)
+  }
+}
+
+/**
+ * @deprecated Use the `createRootRouteWithContext` function instead.
+ */
+export const rootRouteWithContext = createRootRouteWithContext
+
+export class RootRoute<
+  in out TRegister = unknown,
+  in out TSearchValidator = undefined,
+  in out TRouterContext = {},
+  in out TRouteContextFn = AnyContext,
+  in out TBeforeLoadFn = AnyContext,
+  in out TLoaderDeps extends Record<string, any> = {},
+  in out TLoaderFn = undefined,
+  in out TChildren = unknown,
+  in out TFileRouteTypes = unknown,
+  in out TSSR = unknown,
+  in out TServerMiddlewares = unknown,
+  in out THandlers = undefined,
+>
+  extends BaseRootRoute<
+    TRegister,
+    TSearchValidator,
+    TRouterContext,
+    TRouteContextFn,
+    TBeforeLoadFn,
+    TLoaderDeps,
+    TLoaderFn,
+    TChildren,
+    TFileRouteTypes,
+    TSSR,
+    TServerMiddlewares,
+    THandlers
+  >
+  implements
+    RootRouteCore<
+      TRegister,
+      TSearchValidator,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      TLoaderDeps,
+      TLoaderFn,
+      TChildren,
+      TFileRouteTypes,
+      TSSR,
+      TServerMiddlewares,
+      THandlers
+    >
+{
+  /**
+   * @deprecated `RootRoute` is now an internal implementation detail. Use `createRootRoute()` instead.
+   */
+  constructor(
+    options?: RootRouteOptions<
+      TRegister,
+      TSearchValidator,
+      TRouterContext,
+      TRouteContextFn,
+      TBeforeLoadFn,
+      TLoaderDeps,
+      TLoaderFn,
+      TSSR,
+      TServerMiddlewares,
+      THandlers
+    >,
+  ) {
+    super(options)
+    // No $$typeof = Symbol.for('react.memo') - not needed for Preact
+  }
+
+  useMatch: UseMatchRoute<RootRouteId> = (opts) => {
+    return useMatch({
+      select: opts?.select,
+      from: this.id,
+      structuralSharing: opts?.structuralSharing,
+    } as any) as any
+  }
+
+  useRouteContext: UseRouteContextRoute<RootRouteId> = (opts) => {
+    return useMatch({
+      ...opts,
+      from: this.id,
+      select: (d) => (opts?.select ? opts.select(d.context) : d.context),
+    }) as any
+  }
+
+  useSearch: UseSearchRoute<RootRouteId> = (opts) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    return useSearch({
+      select: opts?.select,
+      structuralSharing: opts?.structuralSharing,
+      from: this.id,
+    } as any) as any
+  }
+
+  useParams: UseParamsRoute<RootRouteId> = (opts) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    return useParams({
+      select: opts?.select,
+      structuralSharing: opts?.structuralSharing,
+      from: this.id,
+    } as any) as any
+  }
+
+  useLoaderDeps: UseLoaderDepsRoute<RootRouteId> = (opts) => {
+    return useLoaderDeps({ ...opts, from: this.id } as any)
+  }
+
+  useLoaderData: UseLoaderDataRoute<RootRouteId> = (opts) => {
+    return useLoaderData({ ...opts, from: this.id } as any)
+  }
+
+  useNavigate = (): UseNavigateResult<'/'> => {
+    return useNavigate({ from: this.fullPath })
+  }
+
+  // No forwardRef in Preact - Link is a plain function component
+  Link: LinkComponentRoute<'/'> = ((props: any) => {
+    return h(Link as any, { from: this.fullPath, ...props })
+  }) as unknown as LinkComponentRoute<'/'>
+}
+
+/**
+ * Creates a root Route instance used to build your route tree.
+ */
+export function createRootRoute<
+  TRegister = Register,
+  TSearchValidator = undefined,
+  TRouterContext = {},
+  TRouteContextFn = AnyContext,
+  TBeforeLoadFn = AnyContext,
+  TLoaderDeps extends Record<string, any> = {},
+  TLoaderFn = undefined,
+  TSSR = unknown,
+  const TServerMiddlewares = unknown,
+  THandlers = undefined,
+>(
+  options?: RootRouteOptions<
+    TRegister,
+    TSearchValidator,
+    TRouterContext,
+    TRouteContextFn,
+    TBeforeLoadFn,
+    TLoaderDeps,
+    TLoaderFn,
+    TSSR,
+    TServerMiddlewares,
+    THandlers
+  >,
+): RootRoute<
+  TRegister,
+  TSearchValidator,
+  TRouterContext,
+  TRouteContextFn,
+  TBeforeLoadFn,
+  TLoaderDeps,
+  TLoaderFn,
+  unknown,
+  unknown,
+  TSSR,
+  TServerMiddlewares,
+  THandlers
+> {
+  return new RootRoute<
+    TRegister,
+    TSearchValidator,
+    TRouterContext,
+    TRouteContextFn,
+    TBeforeLoadFn,
+    TLoaderDeps,
+    TLoaderFn,
+    unknown,
+    unknown,
+    TSSR,
+    TServerMiddlewares,
+    THandlers
+  >(options)
+}
+
+export function createRouteMask<
+  TRouteTree extends AnyRoute,
+  TFrom extends string,
+  TTo extends string,
+>(
+  opts: {
+    routeTree: TRouteTree
+  } & ToMaskOptions<RouterCore<TRouteTree, 'never', boolean>, TFrom, TTo>,
+): RouteMask<TRouteTree> {
+  return opts as any
+}
+
+export interface DefaultRouteTypes<TProps> {
+  component: (props: TProps) => VNode | null
+}
+export interface RouteTypes<TProps> extends DefaultRouteTypes<TProps> {}
+
+export type AsyncRouteComponent<TProps> = RouteTypes<TProps>['component'] & {
+  preload?: () => Promise<void>
+}
+
+export type RouteComponent = AsyncRouteComponent<{}>
+
+export type ErrorRouteComponent = AsyncRouteComponent<ErrorComponentProps>
+
+export type NotFoundRouteComponent = RouteTypes<NotFoundRouteProps>['component']
+
+export class NotFoundRoute<
+  TRegister,
+  TParentRoute extends AnyRootRoute,
+  TRouterContext = AnyContext,
+  TRouteContextFn = AnyContext,
+  TBeforeLoadFn = AnyContext,
+  TSearchValidator = undefined,
+  TLoaderDeps extends Record<string, any> = {},
+  TLoaderFn = undefined,
+  TChildren = unknown,
+  TSSR = unknown,
+  TServerMiddlewares = unknown,
+> extends Route<
+  TRegister,
+  TParentRoute,
+  '/404',
+  '/404',
+  '404',
+  '404',
+  TSearchValidator,
+  {},
+  TRouterContext,
+  TRouteContextFn,
+  TBeforeLoadFn,
+  TLoaderDeps,
+  TLoaderFn,
+  TChildren,
+  TSSR,
+  TServerMiddlewares
+> {
+  constructor(
+    options: Omit<
+      RouteOptions<
+        TRegister,
+        TParentRoute,
+        string,
+        string,
+        string,
+        string,
+        TSearchValidator,
+        {},
+        TLoaderDeps,
+        TLoaderFn,
+        TRouterContext,
+        TRouteContextFn,
+        TBeforeLoadFn,
+        TSSR,
+        TServerMiddlewares
+      >,
+      | 'caseSensitive'
+      | 'parseParams'
+      | 'stringifyParams'
+      | 'path'
+      | 'id'
+      | 'params'
+    >,
+  ) {
+    super({
+      ...(options as any),
+      id: '404',
+    })
+  }
+}
diff --git a/packages/preact-router/src/router.ts b/packages/preact-router/src/router.ts
new file mode 100644
index 00000000000..8a9e39b523b
--- /dev/null
+++ b/packages/preact-router/src/router.ts
@@ -0,0 +1,79 @@
+import { RouterCore } from '@tanstack/router-core'
+import { createFileRoute, createLazyFileRoute } from './fileRoute'
+import type { RouterHistory } from '@tanstack/history'
+import type {
+  AnyRoute,
+  CreateRouterFn,
+  RouterConstructorOptions,
+  TrailingSlashOption,
+} from '@tanstack/router-core'
+
+import type {
+  ErrorRouteComponent,
+  NotFoundRouteComponent,
+  RouteComponent,
+} from './route'
+
+declare module '@tanstack/router-core' {
+  export interface RouterOptionsExtensions {
+    defaultComponent?: RouteComponent
+    defaultErrorComponent?: ErrorRouteComponent
+    defaultPendingComponent?: RouteComponent
+    defaultNotFoundComponent?: NotFoundRouteComponent
+    /**
+     * A component that will be used to wrap the entire router.
+     * Only non-DOM-rendering components like providers should be used.
+     */
+    Wrap?: (props: { children: any }) => preact.JSX.Element
+    /**
+     * A component that will be used to wrap the inner contents of the router.
+     * Only non-DOM-rendering components like providers should be used.
+     */
+    InnerWrap?: (props: { children: any }) => preact.JSX.Element
+    /**
+     * The default `onCatch` handler for errors caught by the Router ErrorBoundary
+     */
+    defaultOnCatch?: (error: Error, errorInfo: { componentStack?: string }) => void
+  }
+}
+
+/**
+ * Creates a new Router instance for Preact.
+ */
+export const createRouter: CreateRouterFn = (options) => {
+  return new Router(options)
+}
+
+export class Router<
+  in out TRouteTree extends AnyRoute,
+  in out TTrailingSlashOption extends TrailingSlashOption = 'never',
+  in out TDefaultStructuralSharingOption extends boolean = false,
+  in out TRouterHistory extends RouterHistory = RouterHistory,
+  in out TDehydrated extends Record<string, any> = Record<string, any>,
+> extends RouterCore<
+  TRouteTree,
+  TTrailingSlashOption,
+  TDefaultStructuralSharingOption,
+  TRouterHistory,
+  TDehydrated
+> {
+  constructor(
+    options: RouterConstructorOptions<
+      TRouteTree,
+      TTrailingSlashOption,
+      TDefaultStructuralSharingOption,
+      TRouterHistory,
+      TDehydrated
+    >,
+  ) {
+    super(options)
+  }
+}
+
+if (typeof globalThis !== 'undefined') {
+  ;(globalThis as any).createFileRoute = createFileRoute
+  ;(globalThis as any).createLazyFileRoute = createLazyFileRoute
+} else if (typeof window !== 'undefined') {
+  ;(window as any).createFileRoute = createFileRoute
+  ;(window as any).createLazyFileRoute = createLazyFileRoute
+}
diff --git a/packages/preact-router/src/routerContext.tsx b/packages/preact-router/src/routerContext.tsx
new file mode 100644
index 00000000000..725173d888f
--- /dev/null
+++ b/packages/preact-router/src/routerContext.tsx
@@ -0,0 +1,24 @@
+import { createContext } from 'preact'
+import type { AnyRouter } from '@tanstack/router-core'
+
+declare global {
+  interface Window {
+    __TSR_ROUTER_CONTEXT__?: ReturnType<typeof createContext<AnyRouter>>
+  }
+}
+
+const routerContext = createContext<AnyRouter>(null!)
+
+export function getRouterContext() {
+  if (typeof document === 'undefined') {
+    return routerContext
+  }
+
+  if (window.__TSR_ROUTER_CONTEXT__) {
+    return window.__TSR_ROUTER_CONTEXT__
+  }
+
+  window.__TSR_ROUTER_CONTEXT__ = routerContext as any
+
+  return routerContext
+}
diff --git a/packages/preact-router/src/scroll-restoration.tsx b/packages/preact-router/src/scroll-restoration.tsx
new file mode 100644
index 00000000000..f8c3c4559a8
--- /dev/null
+++ b/packages/preact-router/src/scroll-restoration.tsx
@@ -0,0 +1,45 @@
+import {
+  defaultGetScrollRestorationKey,
+  escapeHtml,
+  restoreScroll,
+  storageKey,
+} from '@tanstack/router-core'
+import { isServer } from '@tanstack/router-core/isServer'
+import { useRouter } from './useRouter'
+import { ScriptOnce } from './ScriptOnce'
+
+export function ScrollRestoration() {
+  const router = useRouter()
+  if (!router.isScrollRestoring || !(isServer ?? router.isServer)) {
+    return null
+  }
+  if (typeof router.options.scrollRestoration === 'function') {
+    const shouldRestore = router.options.scrollRestoration({
+      location: router.latestLocation,
+    })
+    if (!shouldRestore) {
+      return null
+    }
+  }
+  const getKey =
+    router.options.getScrollRestorationKey || defaultGetScrollRestorationKey
+  const userKey = getKey(router.latestLocation)
+  const resolvedKey =
+    userKey !== defaultGetScrollRestorationKey(router.latestLocation)
+      ? userKey
+      : undefined
+
+  const restoreScrollOptions: Parameters<typeof restoreScroll>[0] = {
+    storageKey,
+    shouldScrollRestoration: true,
+  }
+  if (resolvedKey) {
+    restoreScrollOptions.key = resolvedKey
+  }
+
+  return (
+    <ScriptOnce
+      children={`(${restoreScroll.toString()})(${escapeHtml(JSON.stringify(restoreScrollOptions))})`}
+    />
+  )
+}
diff --git a/packages/preact-router/src/ssr/serializer.ts b/packages/preact-router/src/ssr/serializer.ts
new file mode 100644
index 00000000000..8fc7b819012
--- /dev/null
+++ b/packages/preact-router/src/ssr/serializer.ts
@@ -0,0 +1,7 @@
+import type { VNode } from 'preact'
+
+declare module '@tanstack/router-core' {
+  export interface SerializerExtensions {
+    ReadableStream: VNode
+  }
+}
diff --git a/packages/preact-router/src/structuralSharing.ts b/packages/preact-router/src/structuralSharing.ts
new file mode 100644
index 00000000000..109e2fd83ca
--- /dev/null
+++ b/packages/preact-router/src/structuralSharing.ts
@@ -0,0 +1,45 @@
+import type {
+  AnyRouter,
+  Constrain,
+  OptionalStructuralSharing,
+  ValidateJSON,
+} from '@tanstack/router-core'
+
+export type DefaultStructuralSharingEnabled<TRouter extends AnyRouter> =
+  boolean extends TRouter['options']['defaultStructuralSharing']
+    ? false
+    : NonNullable<TRouter['options']['defaultStructuralSharing']>
+
+export interface RequiredStructuralSharing<TStructuralSharing, TConstraint> {
+  readonly structuralSharing: Constrain<TStructuralSharing, TConstraint>
+}
+
+export type StructuralSharingOption<
+  TRouter extends AnyRouter,
+  TSelected,
+  TStructuralSharing,
+> = unknown extends TSelected
+  ? OptionalStructuralSharing<TStructuralSharing, boolean>
+  : unknown extends TRouter['routeTree']
+    ? OptionalStructuralSharing<TStructuralSharing, boolean>
+    : TSelected extends ValidateJSON<TSelected>
+      ? OptionalStructuralSharing<TStructuralSharing, boolean>
+      : DefaultStructuralSharingEnabled<TRouter> extends true
+        ? RequiredStructuralSharing<TStructuralSharing, false>
+        : OptionalStructuralSharing<TStructuralSharing, false>
+
+export type StructuralSharingEnabled<
+  TRouter extends AnyRouter,
+  TStructuralSharing,
+> = boolean extends TStructuralSharing
+  ? DefaultStructuralSharingEnabled<TRouter>
+  : TStructuralSharing
+
+export type ValidateSelected<
+  TRouter extends AnyRouter,
+  TSelected,
+  TStructuralSharing,
+> =
+  StructuralSharingEnabled<TRouter, TStructuralSharing> extends true
+    ? ValidateJSON<TSelected>
+    : TSelected
diff --git a/packages/preact-router/src/typePrimitives.ts b/packages/preact-router/src/typePrimitives.ts
new file mode 100644
index 00000000000..317ab260c86
--- /dev/null
+++ b/packages/preact-router/src/typePrimitives.ts
@@ -0,0 +1,84 @@
+import type {
+  AnyRouter,
+  Constrain,
+  InferFrom,
+  InferMaskFrom,
+  InferMaskTo,
+  InferSelected,
+  InferShouldThrow,
+  InferStrict,
+  InferTo,
+  RegisteredRouter,
+} from '@tanstack/router-core'
+import type { LinkComponentProps } from './link'
+import type { UseParamsOptions } from './useParams'
+import type { UseSearchOptions } from './useSearch'
+
+export type ValidateLinkOptions<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TOptions = unknown,
+  TDefaultFrom extends string = string,
+  TComp = 'a',
+> = Constrain<
+  TOptions,
+  LinkComponentProps<
+    TComp,
+    TRouter,
+    InferFrom<TOptions, TDefaultFrom>,
+    InferTo<TOptions>,
+    InferMaskFrom<TOptions>,
+    InferMaskTo<TOptions>
+  >
+>
+
+/**
+ * @private
+ */
+export type InferStructuralSharing<TOptions> = TOptions extends {
+  structuralSharing: infer TStructuralSharing
+}
+  ? TStructuralSharing
+  : unknown
+
+export type ValidateUseSearchOptions<
+  TOptions,
+  TRouter extends AnyRouter = RegisteredRouter,
+> = Constrain<
+  TOptions,
+  UseSearchOptions<
+    TRouter,
+    InferFrom<TOptions>,
+    InferStrict<TOptions>,
+    InferShouldThrow<TOptions>,
+    InferSelected<TOptions>,
+    InferStructuralSharing<TOptions>
+  >
+>
+
+export type ValidateUseParamsOptions<
+  TOptions,
+  TRouter extends AnyRouter = RegisteredRouter,
+> = Constrain<
+  TOptions,
+  UseParamsOptions<
+    TRouter,
+    InferFrom<TOptions>,
+    InferStrict<TOptions>,
+    InferShouldThrow<TOptions>,
+    InferSelected<TOptions>,
+    InferSelected<TOptions>
+  >
+>
+export type ValidateLinkOptionsArray<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TOptions extends ReadonlyArray<any> = ReadonlyArray<unknown>,
+  TDefaultFrom extends string = string,
+  TComp = 'a',
+> = {
+  [K in keyof TOptions]: ValidateLinkOptions<
+    TRouter,
+    TOptions[K],
+    TDefaultFrom,
+    TComp
+  >
+}
diff --git a/packages/preact-router/src/useBlocker.tsx b/packages/preact-router/src/useBlocker.tsx
new file mode 100644
index 00000000000..3b1742b1088
--- /dev/null
+++ b/packages/preact-router/src/useBlocker.tsx
@@ -0,0 +1,321 @@
+import { useEffect, useState } from 'preact/hooks'
+import { useRouter } from './useRouter'
+import type {
+  BlockerFnArgs,
+  HistoryAction,
+  HistoryLocation,
+} from '@tanstack/history'
+import type {
+  AnyRoute,
+  AnyRouter,
+  ParseRoute,
+  RegisteredRouter,
+} from '@tanstack/router-core'
+import type { ComponentChildren } from 'preact'
+
+interface ShouldBlockFnLocation<
+  out TRouteId,
+  out TFullPath,
+  out TAllParams,
+  out TFullSearchSchema,
+> {
+  routeId: TRouteId
+  fullPath: TFullPath
+  pathname: string
+  params: TAllParams
+  search: TFullSearchSchema
+}
+
+type AnyShouldBlockFnLocation = ShouldBlockFnLocation<any, any, any, any>
+type MakeShouldBlockFnLocationUnion<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TRoute extends AnyRoute = ParseRoute<TRouter['routeTree']>,
+> = TRoute extends any
+  ? ShouldBlockFnLocation<
+      TRoute['id'],
+      TRoute['fullPath'],
+      TRoute['types']['allParams'],
+      TRoute['types']['fullSearchSchema']
+    >
+  : never
+
+type BlockerResolver<TRouter extends AnyRouter = RegisteredRouter> =
+  | {
+      status: 'blocked'
+      current: MakeShouldBlockFnLocationUnion<TRouter>
+      next: MakeShouldBlockFnLocationUnion<TRouter>
+      action: HistoryAction
+      proceed: () => void
+      reset: () => void
+    }
+  | {
+      status: 'idle'
+      current: undefined
+      next: undefined
+      action: undefined
+      proceed: undefined
+      reset: undefined
+    }
+
+type ShouldBlockFnArgs<TRouter extends AnyRouter = RegisteredRouter> = {
+  current: MakeShouldBlockFnLocationUnion<TRouter>
+  next: MakeShouldBlockFnLocationUnion<TRouter>
+  action: HistoryAction
+}
+
+export type ShouldBlockFn<TRouter extends AnyRouter = RegisteredRouter> = (
+  args: ShouldBlockFnArgs<TRouter>,
+) => boolean | Promise<boolean>
+export type UseBlockerOpts<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = boolean,
+> = {
+  shouldBlockFn: ShouldBlockFn<TRouter>
+  enableBeforeUnload?: boolean | (() => boolean)
+  disabled?: boolean
+  withResolver?: TWithResolver
+}
+
+type LegacyBlockerFn = () => Promise<any> | any
+type LegacyBlockerOpts = {
+  blockerFn?: LegacyBlockerFn
+  condition?: boolean | any
+}
+
+function _resolveBlockerOpts(
+  opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
+  condition?: boolean | any,
+): UseBlockerOpts {
+  if (opts === undefined) {
+    return {
+      shouldBlockFn: () => true,
+      withResolver: false,
+    }
+  }
+
+  if ('shouldBlockFn' in opts) {
+    return opts
+  }
+
+  if (typeof opts === 'function') {
+    const shouldBlock = Boolean(condition ?? true)
+
+    const _customBlockerFn = async () => {
+      if (shouldBlock) return await opts()
+      return false
+    }
+
+    return {
+      shouldBlockFn: _customBlockerFn,
+      enableBeforeUnload: shouldBlock,
+      withResolver: false,
+    }
+  }
+
+  const shouldBlock = Boolean(opts.condition ?? true)
+  const fn = opts.blockerFn
+
+  const _customBlockerFn = async () => {
+    if (shouldBlock && fn !== undefined) {
+      return await fn()
+    }
+    return shouldBlock
+  }
+
+  return {
+    shouldBlockFn: _customBlockerFn,
+    enableBeforeUnload: shouldBlock,
+    withResolver: fn === undefined,
+  }
+}
+
+export function useBlocker<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = false,
+>(
+  opts: UseBlockerOpts<TRouter, TWithResolver>,
+): TWithResolver extends true ? BlockerResolver<TRouter> : void
+
+/**
+ * @deprecated Use the shouldBlockFn property instead
+ */
+export function useBlocker(blockerFnOrOpts?: LegacyBlockerOpts): BlockerResolver
+
+/**
+ * @deprecated Use the UseBlockerOpts object syntax instead
+ */
+export function useBlocker(
+  blockerFn?: LegacyBlockerFn,
+  condition?: boolean | any,
+): BlockerResolver
+
+export function useBlocker(
+  opts?: UseBlockerOpts | LegacyBlockerOpts | LegacyBlockerFn,
+  condition?: boolean | any,
+): BlockerResolver | void {
+  const {
+    shouldBlockFn,
+    enableBeforeUnload = true,
+    disabled = false,
+    withResolver = false,
+  } = _resolveBlockerOpts(opts, condition)
+
+  const router = useRouter()
+  const { history } = router
+
+  const [resolver, setResolver] = useState<BlockerResolver>({
+    status: 'idle',
+    current: undefined,
+    next: undefined,
+    action: undefined,
+    proceed: undefined,
+    reset: undefined,
+  })
+
+  useEffect(() => {
+    const blockerFnComposed = async (blockerFnArgs: BlockerFnArgs) => {
+      function getLocation(
+        location: HistoryLocation,
+      ): AnyShouldBlockFnLocation {
+        const parsedLocation = router.parseLocation(location)
+        const matchedRoutes = router.getMatchedRoutes(parsedLocation.pathname)
+        if (matchedRoutes.foundRoute === undefined) {
+          return {
+            routeId: '__notFound__',
+            fullPath: parsedLocation.pathname,
+            pathname: parsedLocation.pathname,
+            params: matchedRoutes.routeParams,
+            search: router.options.parseSearch(location.search),
+          }
+        }
+
+        return {
+          routeId: matchedRoutes.foundRoute.id,
+          fullPath: matchedRoutes.foundRoute.fullPath,
+          pathname: parsedLocation.pathname,
+          params: matchedRoutes.routeParams,
+          search: router.options.parseSearch(location.search),
+        }
+      }
+
+      const current = getLocation(blockerFnArgs.currentLocation)
+      const next = getLocation(blockerFnArgs.nextLocation)
+
+      if (
+        current.routeId === '__notFound__' &&
+        next.routeId !== '__notFound__'
+      ) {
+        return false
+      }
+
+      const shouldBlock = await shouldBlockFn({
+        action: blockerFnArgs.action,
+        current,
+        next,
+      })
+      if (!withResolver) {
+        return shouldBlock
+      }
+
+      if (!shouldBlock) {
+        return false
+      }
+
+      const promise = new Promise<boolean>((resolve) => {
+        setResolver({
+          status: 'blocked',
+          current,
+          next,
+          action: blockerFnArgs.action,
+          proceed: () => resolve(false),
+          reset: () => resolve(true),
+        })
+      })
+
+      const canNavigateAsync = await promise
+      setResolver({
+        status: 'idle',
+        current: undefined,
+        next: undefined,
+        action: undefined,
+        proceed: undefined,
+        reset: undefined,
+      })
+
+      return canNavigateAsync
+    }
+
+    return disabled
+      ? undefined
+      : history.block({ blockerFn: blockerFnComposed, enableBeforeUnload })
+  }, [
+    shouldBlockFn,
+    enableBeforeUnload,
+    disabled,
+    withResolver,
+    history,
+    router,
+  ])
+
+  return resolver
+}
+
+const _resolvePromptBlockerArgs = (
+  props: PromptProps | LegacyPromptProps,
+): UseBlockerOpts => {
+  if ('shouldBlockFn' in props) {
+    return { ...props }
+  }
+
+  const shouldBlock = Boolean(props.condition ?? true)
+  const fn = props.blockerFn
+
+  const _customBlockerFn = async () => {
+    if (shouldBlock && fn !== undefined) {
+      return await fn()
+    }
+    return shouldBlock
+  }
+
+  return {
+    shouldBlockFn: _customBlockerFn,
+    enableBeforeUnload: shouldBlock,
+    withResolver: fn === undefined,
+  }
+}
+
+export function Block<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = boolean,
+>(opts: PromptProps<TRouter, TWithResolver>): ComponentChildren
+
+/**
+ *  @deprecated Use the UseBlockerOpts property instead
+ */
+export function Block(opts: LegacyPromptProps): ComponentChildren
+
+export function Block(opts: PromptProps | LegacyPromptProps): ComponentChildren {
+  const { children, ...rest } = opts
+  const args = _resolvePromptBlockerArgs(rest)
+
+  const resolver = useBlocker(args)
+  return children
+    ? typeof children === 'function'
+      ? children(resolver as any)
+      : children
+    : null
+}
+
+type LegacyPromptProps = {
+  blockerFn?: LegacyBlockerFn
+  condition?: boolean | any
+  children?: ComponentChildren | ((params: BlockerResolver) => ComponentChildren)
+}
+
+type PromptProps<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TWithResolver extends boolean = boolean,
+  TParams = TWithResolver extends true ? BlockerResolver<TRouter> : void,
+> = UseBlockerOpts<TRouter, TWithResolver> & {
+  children?: ComponentChildren | ((params: TParams) => ComponentChildren)
+}
diff --git a/packages/preact-router/src/useCanGoBack.ts b/packages/preact-router/src/useCanGoBack.ts
new file mode 100644
index 00000000000..9476a9d51f6
--- /dev/null
+++ b/packages/preact-router/src/useCanGoBack.ts
@@ -0,0 +1,5 @@
+import { useRouterState } from './useRouterState'
+
+export function useCanGoBack() {
+  return useRouterState({ select: (s) => s.location.state.__TSR_index !== 0 })
+}
diff --git a/packages/preact-router/src/useLoaderData.tsx b/packages/preact-router/src/useLoaderData.tsx
new file mode 100644
index 00000000000..356a7b51b64
--- /dev/null
+++ b/packages/preact-router/src/useLoaderData.tsx
@@ -0,0 +1,83 @@
+import { useMatch } from './useMatch'
+import type {
+  StructuralSharingOption,
+  ValidateSelected,
+} from './structuralSharing'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseLoaderData,
+  StrictOrFrom,
+  UseLoaderDataResult,
+} from '@tanstack/router-core'
+
+export interface UseLoaderDataBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+  TStructuralSharing,
+> {
+  select?: (
+    match: ResolveUseLoaderData<TRouter, TFrom, TStrict>,
+  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>
+}
+
+export type UseLoaderDataOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TSelected,
+  TStructuralSharing,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseLoaderDataBaseOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    TSelected,
+    TStructuralSharing
+  > &
+  StructuralSharingOption<TRouter, TSelected, TStructuralSharing>
+
+export type UseLoaderDataRoute<out TId> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseLoaderDataBaseOptions<
+    TRouter,
+    TId,
+    true,
+    TSelected,
+    TStructuralSharing
+  > &
+    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+) => UseLoaderDataResult<TRouter, TId, true, TSelected>
+
+/**
+ * Read and select the current route's loader data with type-safety.
+ */
+export function useLoaderData<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts: UseLoaderDataOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    TSelected,
+    TStructuralSharing
+  >,
+): UseLoaderDataResult<TRouter, TFrom, TStrict, TSelected> {
+  return useMatch({
+    from: opts.from!,
+    strict: opts.strict,
+    structuralSharing: opts.structuralSharing,
+    select: (s: any) => {
+      return opts.select ? opts.select(s.loaderData) : s.loaderData
+    },
+  } as any) as UseLoaderDataResult<TRouter, TFrom, TStrict, TSelected>
+}
diff --git a/packages/preact-router/src/useLoaderDeps.tsx b/packages/preact-router/src/useLoaderDeps.tsx
new file mode 100644
index 00000000000..03c44dccab7
--- /dev/null
+++ b/packages/preact-router/src/useLoaderDeps.tsx
@@ -0,0 +1,61 @@
+import { useMatch } from './useMatch'
+import type {
+  StructuralSharingOption,
+  ValidateSelected,
+} from './structuralSharing'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseLoaderDeps,
+  StrictOrFrom,
+  UseLoaderDepsResult,
+} from '@tanstack/router-core'
+
+export interface UseLoaderDepsBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TSelected,
+  TStructuralSharing,
+> {
+  select?: (
+    deps: ResolveUseLoaderDeps<TRouter, TFrom>,
+  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>
+}
+
+export type UseLoaderDepsOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TSelected,
+  TStructuralSharing,
+> = StrictOrFrom<TRouter, TFrom> &
+  UseLoaderDepsBaseOptions<TRouter, TFrom, TSelected, TStructuralSharing> &
+  StructuralSharingOption<TRouter, TSelected, TStructuralSharing>
+
+export type UseLoaderDepsRoute<out TId> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseLoaderDepsBaseOptions<TRouter, TId, TSelected, TStructuralSharing> &
+    StructuralSharingOption<TRouter, TSelected, false>,
+) => UseLoaderDepsResult<TRouter, TId, TSelected>
+
+/**
+ * Read and select the current route's loader dependencies object.
+ */
+export function useLoaderDeps<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts: UseLoaderDepsOptions<TRouter, TFrom, TSelected, TStructuralSharing>,
+): UseLoaderDepsResult<TRouter, TFrom, TSelected> {
+  const { select, ...rest } = opts
+  return useMatch({
+    ...rest,
+    select: (s) => {
+      return select ? select(s.loaderDeps) : s.loaderDeps
+    },
+  }) as UseLoaderDepsResult<TRouter, TFrom, TSelected>
+}
diff --git a/packages/preact-router/src/useLocation.tsx b/packages/preact-router/src/useLocation.tsx
new file mode 100644
index 00000000000..97d0f294a88
--- /dev/null
+++ b/packages/preact-router/src/useLocation.tsx
@@ -0,0 +1,44 @@
+import { useRouterState } from './useRouterState'
+import type {
+  StructuralSharingOption,
+  ValidateSelected,
+} from './structuralSharing'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  RouterState,
+} from '@tanstack/router-core'
+
+export interface UseLocationBaseOptions<
+  TRouter extends AnyRouter,
+  TSelected,
+  TStructuralSharing extends boolean = boolean,
+> {
+  select?: (
+    state: RouterState<TRouter['routeTree']>['location'],
+  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>
+}
+
+export type UseLocationResult<
+  TRouter extends AnyRouter,
+  TSelected,
+> = unknown extends TSelected
+  ? RouterState<TRouter['routeTree']>['location']
+  : TSelected
+
+/**
+ * Read the current location from the router state with optional selection.
+ */
+export function useLocation<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseLocationBaseOptions<TRouter, TSelected, TStructuralSharing> &
+    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+): UseLocationResult<TRouter, TSelected> {
+  return useRouterState({
+    select: (state: any) =>
+      opts?.select ? opts.select(state.location) : state.location,
+  } as any) as UseLocationResult<TRouter, TSelected>
+}
diff --git a/packages/preact-router/src/useMatch.tsx b/packages/preact-router/src/useMatch.tsx
new file mode 100644
index 00000000000..0cc46c7334e
--- /dev/null
+++ b/packages/preact-router/src/useMatch.tsx
@@ -0,0 +1,122 @@
+import { useContext } from 'preact/hooks'
+import invariant from 'tiny-invariant'
+import { useRouterState } from './useRouterState'
+import { dummyMatchContext, matchContext } from './matchContext'
+import type {
+  StructuralSharingOption,
+  ValidateSelected,
+} from './structuralSharing'
+import type {
+  AnyRouter,
+  MakeRouteMatch,
+  MakeRouteMatchUnion,
+  RegisteredRouter,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+} from '@tanstack/router-core'
+
+export interface UseMatchBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+  TStructuralSharing extends boolean,
+> {
+  select?: (
+    match: MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>,
+  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>
+  shouldThrow?: TThrow
+}
+
+export type UseMatchRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseMatchBaseOptions<
+    TRouter,
+    TFrom,
+    true,
+    true,
+    TSelected,
+    TStructuralSharing
+  > &
+    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+) => UseMatchResult<TRouter, TFrom, true, TSelected>
+
+export type UseMatchOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+  TStructuralSharing extends boolean,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseMatchBaseOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    TThrow,
+    TSelected,
+    TStructuralSharing
+  > &
+  StructuralSharingOption<TRouter, TSelected, TStructuralSharing>
+
+export type UseMatchResult<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+> = unknown extends TSelected
+  ? TStrict extends true
+    ? MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>
+    : MakeRouteMatchUnion<TRouter>
+  : TSelected
+
+/**
+ * Read and select the nearest or targeted route match.
+ */
+export function useMatch<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts: UseMatchOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected,
+    TStructuralSharing
+  >,
+): ThrowOrOptional<UseMatchResult<TRouter, TFrom, TStrict, TSelected>, TThrow> {
+  const nearestMatchId = useContext(
+    opts.from ? dummyMatchContext : matchContext,
+  )
+
+  const matchSelection = useRouterState({
+    select: (state: any) => {
+      const match = state.matches.find((d: any) =>
+        opts.from ? opts.from === d.routeId : d.id === nearestMatchId,
+      )
+      invariant(
+        !((opts.shouldThrow ?? true) && !match),
+        `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+      )
+
+      if (match === undefined) {
+        return undefined
+      }
+
+      return opts.select ? opts.select(match) : match
+    },
+    structuralSharing: opts.structuralSharing,
+  } as any)
+
+  return matchSelection as any
+}
diff --git a/packages/preact-router/src/useNavigate.tsx b/packages/preact-router/src/useNavigate.tsx
new file mode 100644
index 00000000000..6f987ecdac9
--- /dev/null
+++ b/packages/preact-router/src/useNavigate.tsx
@@ -0,0 +1,61 @@
+import { useCallback, useRef } from 'preact/hooks'
+import { useLayoutEffect } from './utils'
+import { useRouter } from './useRouter'
+import type {
+  AnyRouter,
+  FromPathOption,
+  NavigateOptions,
+  RegisteredRouter,
+  UseNavigateResult,
+} from '@tanstack/router-core'
+
+/**
+ * Imperative navigation hook.
+ */
+export function useNavigate<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDefaultFrom extends string = string,
+>(_defaultOpts?: {
+  from?: FromPathOption<TRouter, TDefaultFrom>
+}): UseNavigateResult<TDefaultFrom> {
+  const router = useRouter()
+
+  return useCallback(
+    (options: NavigateOptions) => {
+      return router.navigate({
+        ...options,
+        from: options.from ?? _defaultOpts?.from,
+      })
+    },
+    [_defaultOpts?.from, router],
+  ) as UseNavigateResult<TDefaultFrom>
+}
+
+/**
+ * Component that triggers a navigation when rendered.
+ */
+export function Navigate<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string = string,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
+>(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {
+  const router = useRouter()
+  const navigate = useNavigate()
+
+  const previousPropsRef = useRef<NavigateOptions<
+    TRouter,
+    TFrom,
+    TTo,
+    TMaskFrom,
+    TMaskTo
+  > | null>(null)
+  useLayoutEffect(() => {
+    if (previousPropsRef.current !== props) {
+      navigate(props)
+      previousPropsRef.current = props
+    }
+  }, [router, props, navigate])
+  return null
+}
diff --git a/packages/preact-router/src/useParams.tsx b/packages/preact-router/src/useParams.tsx
new file mode 100644
index 00000000000..8179841245f
--- /dev/null
+++ b/packages/preact-router/src/useParams.tsx
@@ -0,0 +1,98 @@
+import { useMatch } from './useMatch'
+import type {
+  StructuralSharingOption,
+  ValidateSelected,
+} from './structuralSharing'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseParams,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+  UseParamsResult,
+} from '@tanstack/router-core'
+
+export interface UseParamsBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+  TStructuralSharing,
+> {
+  select?: (
+    params: ResolveUseParams<TRouter, TFrom, TStrict>,
+  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>
+  shouldThrow?: TThrow
+}
+
+export type UseParamsOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+  TStructuralSharing,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseParamsBaseOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    TThrow,
+    TSelected,
+    TStructuralSharing
+  > &
+  StructuralSharingOption<TRouter, TSelected, TStructuralSharing>
+
+export type UseParamsRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseParamsBaseOptions<
+    TRouter,
+    TFrom,
+    /* TStrict */ true,
+    /* TThrow */ true,
+    TSelected,
+    TStructuralSharing
+  > &
+    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+) => UseParamsResult<TRouter, TFrom, true, TSelected>
+
+/**
+ * Access the current route's path parameters with type-safety.
+ */
+export function useParams<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts: UseParamsOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected,
+    TStructuralSharing
+  >,
+): ThrowOrOptional<
+  UseParamsResult<TRouter, TFrom, TStrict, TSelected>,
+  TThrow
+> {
+  return useMatch({
+    from: opts.from!,
+    shouldThrow: opts.shouldThrow,
+    structuralSharing: opts.structuralSharing,
+    strict: opts.strict,
+    select: (match) => {
+      const params = opts.strict === false ? match.params : match._strictParams
+
+      return opts.select ? opts.select(params) : params
+    },
+  }) as any
+}
diff --git a/packages/preact-router/src/useRouteContext.ts b/packages/preact-router/src/useRouteContext.ts
new file mode 100644
index 00000000000..0aed8720e64
--- /dev/null
+++ b/packages/preact-router/src/useRouteContext.ts
@@ -0,0 +1,30 @@
+import { useMatch } from './useMatch'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  UseRouteContextBaseOptions,
+  UseRouteContextOptions,
+  UseRouteContextResult,
+} from '@tanstack/router-core'
+
+export type UseRouteContextRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseRouteContextBaseOptions<TRouter, TFrom, true, TSelected>,
+) => UseRouteContextResult<TRouter, TFrom, true, TSelected>
+
+export function useRouteContext<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseRouteContextOptions<TRouter, TFrom, TStrict, TSelected>,
+): UseRouteContextResult<TRouter, TFrom, TStrict, TSelected> {
+  return useMatch({
+    ...(opts as any),
+    select: (match) =>
+      opts.select ? opts.select(match.context) : match.context,
+  }) as UseRouteContextResult<TRouter, TFrom, TStrict, TSelected>
+}
diff --git a/packages/preact-router/src/useRouter.tsx b/packages/preact-router/src/useRouter.tsx
new file mode 100644
index 00000000000..5cf16819cde
--- /dev/null
+++ b/packages/preact-router/src/useRouter.tsx
@@ -0,0 +1,19 @@
+import warning from 'tiny-warning'
+import { useContext } from 'preact/hooks'
+import { getRouterContext } from './routerContext'
+import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core'
+
+/**
+ * Access the current TanStack Router instance from Preact context.
+ * Must be used within a `RouterProvider`.
+ */
+export function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {
+  warn?: boolean
+}): TRouter {
+  const value = useContext(getRouterContext())
+  warning(
+    !((opts?.warn ?? true) && !value),
+    'useRouter must be used inside a <RouterProvider> component!',
+  )
+  return value as any
+}
diff --git a/packages/preact-router/src/useRouterState.tsx b/packages/preact-router/src/useRouterState.tsx
new file mode 100644
index 00000000000..271992522da
--- /dev/null
+++ b/packages/preact-router/src/useRouterState.tsx
@@ -0,0 +1,75 @@
+import { useStore } from '@tanstack/preact-store'
+import { useRef } from 'preact/hooks'
+import { replaceEqualDeep } from '@tanstack/router-core'
+import { isServer } from '@tanstack/router-core/isServer'
+import { useRouter } from './useRouter'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  RouterState,
+} from '@tanstack/router-core'
+import type {
+  StructuralSharingOption,
+  ValidateSelected,
+} from './structuralSharing'
+
+export type UseRouterStateOptions<
+  TRouter extends AnyRouter,
+  TSelected,
+  TStructuralSharing,
+> = {
+  router?: TRouter
+  select?: (
+    state: RouterState<TRouter['routeTree']>,
+  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>
+} & StructuralSharingOption<TRouter, TSelected, TStructuralSharing>
+
+export type UseRouterStateResult<
+  TRouter extends AnyRouter,
+  TSelected,
+> = unknown extends TSelected ? RouterState<TRouter['routeTree']> : TSelected
+
+/**
+ * Subscribe to the router's state store with optional selection and
+ * structural sharing for render optimization.
+ */
+export function useRouterState<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseRouterStateOptions<TRouter, TSelected, TStructuralSharing>,
+): UseRouterStateResult<TRouter, TSelected> {
+  const contextRouter = useRouter<TRouter>({
+    warn: opts?.router === undefined,
+  })
+  const router = opts?.router || contextRouter
+
+  // During SSR we render exactly once and do not need reactivity.
+  const _isServer = isServer ?? router.isServer
+  if (_isServer) {
+    const state = router.state as RouterState<TRouter['routeTree']>
+    return (opts?.select ? opts.select(state) : state) as UseRouterStateResult<
+      TRouter,
+      TSelected
+    >
+  }
+
+  const previousResult =
+    useRef<ValidateSelected<TRouter, TSelected, TStructuralSharing>>(undefined as any)
+
+  return useStore(router.__store, (state) => {
+    if (opts?.select) {
+      if (opts.structuralSharing ?? router.options.defaultStructuralSharing) {
+        const newSlice = replaceEqualDeep(
+          previousResult.current,
+          opts.select(state),
+        )
+        previousResult.current = newSlice
+        return newSlice
+      }
+      return opts.select(state)
+    }
+    return state
+  }) as UseRouterStateResult<TRouter, TSelected>
+}
diff --git a/packages/preact-router/src/useSearch.tsx b/packages/preact-router/src/useSearch.tsx
new file mode 100644
index 00000000000..39d57963360
--- /dev/null
+++ b/packages/preact-router/src/useSearch.tsx
@@ -0,0 +1,96 @@
+import { useMatch } from './useMatch'
+import type {
+  StructuralSharingOption,
+  ValidateSelected,
+} from './structuralSharing'
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseSearch,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+  UseSearchResult,
+} from '@tanstack/router-core'
+
+export interface UseSearchBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+  TStructuralSharing,
+> {
+  select?: (
+    state: ResolveUseSearch<TRouter, TFrom, TStrict>,
+  ) => ValidateSelected<TRouter, TSelected, TStructuralSharing>
+  shouldThrow?: TThrow
+}
+
+export type UseSearchOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+  TStructuralSharing,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseSearchBaseOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    TThrow,
+    TSelected,
+    TStructuralSharing
+  > &
+  StructuralSharingOption<TRouter, TSelected, TStructuralSharing>
+
+export type UseSearchRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts?: UseSearchBaseOptions<
+    TRouter,
+    TFrom,
+    /* TStrict */ true,
+    /* TThrow */ true,
+    TSelected,
+    TStructuralSharing
+  > &
+    StructuralSharingOption<TRouter, TSelected, TStructuralSharing>,
+) => UseSearchResult<TRouter, TFrom, true, TSelected>
+
+/**
+ * Read and select the current route's search parameters with type-safety.
+ */
+export function useSearch<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+  TStructuralSharing extends boolean = boolean,
+>(
+  opts: UseSearchOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected,
+    TStructuralSharing
+  >,
+): ThrowOrOptional<
+  UseSearchResult<TRouter, TFrom, TStrict, TSelected>,
+  TThrow
+> {
+  return useMatch({
+    from: opts.from!,
+    strict: opts.strict,
+    shouldThrow: opts.shouldThrow,
+    structuralSharing: opts.structuralSharing,
+    select: (match: any) => {
+      return opts.select ? opts.select(match.search) : match.search
+    },
+  }) as any
+}
diff --git a/packages/preact-router/src/utils.ts b/packages/preact-router/src/utils.ts
new file mode 100644
index 00000000000..a91d7722b18
--- /dev/null
+++ b/packages/preact-router/src/utils.ts
@@ -0,0 +1,66 @@
+import { useLayoutEffect as preactUseLayoutEffect, useEffect, useRef } from 'preact/hooks'
+import type { RefObject } from 'preact'
+
+export function useStableCallback<T extends (...args: Array<any>) => any>(
+  fn: T,
+): T {
+  const fnRef = useRef(fn)
+  fnRef.current = fn
+
+  const ref = useRef((...args: Array<any>) => fnRef.current(...args))
+  return ref.current as T
+}
+
+export const useLayoutEffect =
+  typeof window !== 'undefined' ? preactUseLayoutEffect : useEffect
+
+/**
+ * Taken from https://www.developerway.com/posts/implementing-advanced-use-previous-hook#part3
+ */
+export function usePrevious<T>(value: T): T | null {
+  const ref = useRef<{ value: T; prev: T | null }>({
+    value: value,
+    prev: null,
+  })
+
+  const current = ref.current.value
+
+  if (value !== current) {
+    ref.current = {
+      value: value,
+      prev: current,
+    }
+  }
+
+  return ref.current.prev
+}
+
+/**
+ * Preact hook to wrap `IntersectionObserver`.
+ */
+export function useIntersectionObserver<T extends Element>(
+  ref: RefObject<T | null>,
+  callback: (entry: IntersectionObserverEntry | undefined) => void,
+  intersectionObserverOptions: IntersectionObserverInit = {},
+  options: { disabled?: boolean } = {},
+) {
+  useEffect(() => {
+    if (
+      !ref.current ||
+      options.disabled ||
+      typeof IntersectionObserver !== 'function'
+    ) {
+      return
+    }
+
+    const observer = new IntersectionObserver(([entry]) => {
+      callback(entry)
+    }, intersectionObserverOptions)
+
+    observer.observe(ref.current)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [callback, intersectionObserverOptions, options.disabled, ref])
+}
diff --git a/packages/preact-router/tests/ClientOnly.test.tsx b/packages/preact-router/tests/ClientOnly.test.tsx
new file mode 100644
index 00000000000..bf237e5aa77
--- /dev/null
+++ b/packages/preact-router/tests/ClientOnly.test.tsx
@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, test } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/preact'
+import { ClientOnly } from '../src'
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('ClientOnly', () => {
+  test('renders children after hydration', async () => {
+    render(
+      <ClientOnly fallback={<div>Loading...</div>}>
+        <div>Client Content</div>
+      </ClientOnly>,
+    )
+
+    // After effect runs, children should be rendered
+    expect(await screen.findByText('Client Content')).toBeInTheDocument()
+  })
+
+  test('renders fallback initially', () => {
+    // ClientOnly uses useEffect to set hydrated=true,
+    // so on first render it shows fallback
+    const { container } = render(
+      <ClientOnly fallback={<div>Fallback</div>}>
+        <div>Client Content</div>
+      </ClientOnly>,
+    )
+
+    // After first render + effects, it should show client content
+    // In jsdom with testing-library, effects run synchronously
+    // So we check for the final state
+    expect(container.textContent).toContain('Client Content')
+  })
+
+  test('renders null fallback by default', () => {
+    const { container } = render(
+      <ClientOnly>
+        <div>Client Content</div>
+      </ClientOnly>,
+    )
+
+    expect(container.textContent).toContain('Client Content')
+  })
+})
diff --git a/packages/preact-router/tests/Matches.test.tsx b/packages/preact-router/tests/Matches.test.tsx
new file mode 100644
index 00000000000..6126fa948a3
--- /dev/null
+++ b/packages/preact-router/tests/Matches.test.tsx
@@ -0,0 +1,79 @@
+import { afterEach, describe, expect, test } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/preact'
+import {
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '../src'
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('Matches', () => {
+  test('renders the match tree correctly', async () => {
+    const rootRoute = createRootRoute({
+      component: () => (
+        <div>
+          <h1>Root</h1>
+          <Outlet />
+        </div>
+      ),
+    })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => <div>Index Content</div>,
+    })
+    const routeTree = rootRoute.addChildren([indexRoute])
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    expect(await screen.findByText('Root')).toBeInTheDocument()
+    expect(await screen.findByText('Index Content')).toBeInTheDocument()
+  })
+
+  test('renders nested match tree', async () => {
+    const rootRoute = createRootRoute({
+      component: () => (
+        <div>
+          <Outlet />
+        </div>
+      ),
+    })
+    const parentRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/parent',
+      component: () => (
+        <div>
+          <span>Parent</span>
+          <Outlet />
+        </div>
+      ),
+    })
+    const childRoute = createRoute({
+      getParentRoute: () => parentRoute,
+      path: '/child',
+      component: () => <span>Child</span>,
+    })
+    const routeTree = rootRoute.addChildren([
+      parentRoute.addChildren([childRoute]),
+    ])
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/parent/child'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    expect(await screen.findByText('Parent')).toBeInTheDocument()
+    expect(await screen.findByText('Child')).toBeInTheDocument()
+  })
+})
diff --git a/packages/preact-router/tests/Suspense.test.tsx b/packages/preact-router/tests/Suspense.test.tsx
new file mode 100644
index 00000000000..3dd3a010cc9
--- /dev/null
+++ b/packages/preact-router/tests/Suspense.test.tsx
@@ -0,0 +1,137 @@
+import { afterEach, describe, expect, test, vi } from 'vitest'
+import { cleanup, render, screen, act } from '@testing-library/preact'
+import { h, Component } from 'preact'
+import { Suspense } from '../src/Suspense'
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('Suspense', () => {
+  test('renders children when no promise is thrown', () => {
+    render(
+      <Suspense fallback={<div>Loading...</div>}>
+        <div>Content</div>
+      </Suspense>,
+    )
+
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+
+  test('renders fallback when a promise is thrown', async () => {
+    let resolve!: () => void
+    const promise = new Promise<void>((r) => {
+      resolve = r
+    })
+
+    function ThrowsPromise() {
+      throw promise
+    }
+
+    render(
+      <Suspense fallback={<div>Loading...</div>}>
+        <ThrowsPromise />
+      </Suspense>,
+    )
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+
+    await act(async () => {
+      resolve()
+      await promise
+    })
+
+    // After resolve, fallback should go away (children re-render)
+    // Note: The component will re-render and throw again if it still throws,
+    // but for this test the promise is resolved so componentDidCatch won't be triggered again
+  })
+
+  test('renders fallback as null when no fallback prop is provided', async () => {
+    let resolve!: () => void
+    const promise = new Promise<void>((r) => {
+      resolve = r
+    })
+
+    function ThrowsPromise() {
+      throw promise
+    }
+
+    const { container } = render(
+      <Suspense>
+        <ThrowsPromise />
+      </Suspense>,
+    )
+
+    // No fallback, so nothing is rendered
+    expect(container.innerHTML).toBe('')
+
+    resolve()
+  })
+
+  test('re-renders children after promise resolves', async () => {
+    let shouldThrow = true
+    let resolve!: () => void
+    const promise = new Promise<void>((r) => {
+      resolve = r
+    })
+
+    function MaybeThrows() {
+      if (shouldThrow) {
+        throw promise
+      }
+      return <div>Resolved Content</div>
+    }
+
+    render(
+      <Suspense fallback={<div>Loading...</div>}>
+        <MaybeThrows />
+      </Suspense>,
+    )
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+
+    shouldThrow = false
+    await act(async () => {
+      resolve()
+      await promise
+    })
+
+    expect(screen.getByText('Resolved Content')).toBeInTheDocument()
+  })
+
+  test('rethrows non-promise errors', () => {
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    class ErrorCatcher extends Component<
+      { children: any },
+      { error: string | null }
+    > {
+      state = { error: null as string | null }
+      componentDidCatch(err: any) {
+        this.setState({ error: err.message })
+      }
+      render() {
+        if (this.state.error) {
+          return <div>Error: {this.state.error}</div>
+        }
+        return this.props.children
+      }
+    }
+
+    function ThrowsError(): any {
+      throw new Error('Not a promise')
+    }
+
+    render(
+      <ErrorCatcher>
+        <Suspense fallback={<div>Loading...</div>}>
+          <ThrowsError />
+        </Suspense>
+      </ErrorCatcher>,
+    )
+
+    expect(screen.getByText('Error: Not a promise')).toBeInTheDocument()
+
+    spy.mockRestore()
+  })
+})
diff --git a/packages/preact-router/tests/blocker.test.tsx b/packages/preact-router/tests/blocker.test.tsx
new file mode 100644
index 00000000000..798a24edd72
--- /dev/null
+++ b/packages/preact-router/tests/blocker.test.tsx
@@ -0,0 +1,90 @@
+import { afterEach, describe, expect, test } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/preact'
+import {
+  Block,
+  Link,
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '../src'
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('Block component', () => {
+  test('blocks navigation with shouldBlockFn returning true', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <Block shouldBlockFn={() => true}>
+          <div>
+            <h1>Home</h1>
+            <Link to="/about">Go to About</Link>
+          </div>
+        </Block>
+      ),
+    })
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: () => <h1>About</h1>,
+    })
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, aboutRoute]),
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    expect(await screen.findByText('Home')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Go to About'))
+
+    // Navigation should be blocked
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    expect(screen.queryByText('About')).not.toBeInTheDocument()
+  })
+
+  test('does not block when shouldBlockFn returns false', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <Block shouldBlockFn={() => false}>
+          <div>
+            <h1>Home</h1>
+            <Link to="/about">Go to About</Link>
+          </div>
+        </Block>
+      ),
+    })
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: () => <h1>About</h1>,
+    })
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, aboutRoute]),
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    expect(await screen.findByText('Home')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Go to About'))
+
+    expect(await screen.findByText('About')).toBeInTheDocument()
+  })
+})
diff --git a/packages/preact-router/tests/link.test.tsx b/packages/preact-router/tests/link.test.tsx
new file mode 100644
index 00000000000..32153b41468
--- /dev/null
+++ b/packages/preact-router/tests/link.test.tsx
@@ -0,0 +1,167 @@
+import { afterEach, describe, expect, test, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/preact'
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '../src'
+import { getIntersectionObserverMock } from './utils'
+
+const ioObserveMock = vi.fn()
+const ioDisconnectMock = vi.fn()
+
+afterEach(() => {
+  vi.resetAllMocks()
+  cleanup()
+})
+
+describe('Link', () => {
+  test('when a Link is disabled', async () => {
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <>
+          <h1>Index</h1>
+          <Link to="/posts" disabled>
+            Posts
+          </Link>
+        </>
+      ),
+    })
+    const postsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/posts',
+      component: () => <h1>Posts</h1>,
+    })
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postsRoute]),
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const postsLink = await screen.findByRole('link', { name: 'Posts' })
+
+    expect(postsLink).toHaveAttribute('aria-disabled', 'true')
+
+    fireEvent.click(postsLink)
+
+    // Should still be on index
+    expect(await screen.findByText('Index')).toBeInTheDocument()
+  })
+
+  test('when the current route is the root', async () => {
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <>
+          <h1>Index</h1>
+          <Link to="/" activeProps={{ className: 'active' }}>
+            Index
+          </Link>
+          <Link to="/posts" inactiveProps={{ className: 'inactive' }}>
+            Posts
+          </Link>
+        </>
+      ),
+    })
+    const postsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/posts',
+      component: () => <h1>Posts</h1>,
+    })
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postsRoute]),
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const indexLink = await screen.findByRole('link', { name: 'Index' })
+    const postsLink = await screen.findByRole('link', { name: 'Posts' })
+
+    expect(indexLink).toHaveAttribute('class', 'active')
+    expect(postsLink).toHaveAttribute('class', 'inactive')
+  })
+
+  test('navigates on click', async () => {
+    const rootRoute = createRootRoute({
+      component: () => (
+        <>
+          <Outlet />
+        </>
+      ),
+    })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <div>
+          <h1>Index</h1>
+          <Link to="/posts">Go to Posts</Link>
+        </div>
+      ),
+    })
+    const postsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/posts',
+      component: () => <h1>Posts page</h1>,
+    })
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postsRoute]),
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const link = await screen.findByText('Go to Posts')
+    fireEvent.click(link)
+
+    const postsPage = await screen.findByText('Posts page')
+    expect(postsPage).toBeInTheDocument()
+  })
+
+  test('Link with search params', async () => {
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <Link to="/posts" search={{ page: 2 }}>
+          Posts Page 2
+        </Link>
+      ),
+    })
+    const postsRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/posts',
+      validateSearch: (search: Record<string, unknown>) => ({
+        page: Number(search.page ?? 1),
+      }),
+      component: () => {
+        const search = postsRoute.useSearch()
+        return <div>Page: {search.page}</div>
+      },
+    })
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, postsRoute]),
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const link = await screen.findByText('Posts Page 2')
+    fireEvent.click(link)
+
+    const pageText = await screen.findByText('Page: 2')
+    expect(pageText).toBeInTheDocument()
+  })
+})
diff --git a/packages/preact-router/tests/loaders.test.tsx b/packages/preact-router/tests/loaders.test.tsx
new file mode 100644
index 00000000000..23f49f90ea7
--- /dev/null
+++ b/packages/preact-router/tests/loaders.test.tsx
@@ -0,0 +1,158 @@
+import { afterEach, describe, expect, test, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/preact'
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '../src'
+import { sleep } from './utils'
+
+afterEach(() => {
+  cleanup()
+})
+
+const WAIT_TIME = 100
+
+describe('loaders are being called', () => {
+  test('called on /', async () => {
+    const indexLoaderMock = vi.fn()
+
+    const rootRoute = createRootRoute({})
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      loader: async () => {
+        await sleep(WAIT_TIME)
+        indexLoaderMock('foo')
+      },
+      component: () => <div>Index page</div>,
+    })
+    const routeTree = rootRoute.addChildren([indexRoute])
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const indexElement = await screen.findByText('Index page')
+    expect(indexElement).toBeInTheDocument()
+
+    expect(indexLoaderMock).toHaveBeenCalled()
+  })
+
+  test('both are called on /nested/foo', async () => {
+    const nestedLoaderMock = vi.fn()
+    const nestedFooLoaderMock = vi.fn()
+
+    const rootRoute = createRootRoute({})
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <div>
+          <h1>Index page</h1>
+          <Link to="/nested/foo">link to foo</Link>
+        </div>
+      ),
+    })
+    const nestedRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/nested',
+      loader: async () => {
+        await sleep(WAIT_TIME)
+        nestedLoaderMock('nested')
+      },
+    })
+    const fooRoute = createRoute({
+      getParentRoute: () => nestedRoute,
+      path: '/foo',
+      loader: async () => {
+        await sleep(WAIT_TIME)
+        nestedFooLoaderMock('foo')
+      },
+      component: () => <div>Nested Foo page</div>,
+    })
+    const routeTree = rootRoute.addChildren([
+      nestedRoute.addChildren([fooRoute]),
+      indexRoute,
+    ])
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const linkToFoo = await screen.findByText('link to foo')
+    fireEvent.click(linkToFoo)
+
+    const fooElement = await screen.findByText('Nested Foo page')
+    expect(fooElement).toBeInTheDocument()
+
+    expect(nestedLoaderMock).toHaveBeenCalled()
+    expect(nestedFooLoaderMock).toHaveBeenCalled()
+  })
+})
+
+describe('loaders parentMatchPromise', () => {
+  test('parentMatchPromise is defined in a child route', async () => {
+    const nestedLoaderMock = vi.fn()
+
+    const rootRoute = createRootRoute({})
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => (
+        <div>
+          Index page
+          <Link to="/nested/foo">link to foo</Link>
+        </div>
+      ),
+    })
+    const nestedRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/nested',
+      loader: async () => {
+        await sleep(WAIT_TIME)
+        return 'nested'
+      },
+      component: () => <Outlet />,
+    })
+    const fooRoute = createRoute({
+      getParentRoute: () => nestedRoute,
+      path: '/foo',
+      loader: async ({ parentMatchPromise }) => {
+        nestedLoaderMock(parentMatchPromise)
+        const parentMatch = await parentMatchPromise
+        expect(parentMatch.loaderData).toBe('nested')
+      },
+      component: () => <div>Nested Foo page</div>,
+    })
+    const routeTree = rootRoute.addChildren([
+      nestedRoute.addChildren([fooRoute]),
+      indexRoute,
+    ])
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const linkToFoo = await screen.findByRole('link', { name: 'link to foo' })
+    expect(linkToFoo).toBeInTheDocument()
+
+    fireEvent.click(linkToFoo)
+
+    const fooElement = await screen.findByText('Nested Foo page')
+    expect(fooElement).toBeInTheDocument()
+
+    expect(nestedLoaderMock).toHaveBeenCalled()
+    expect(nestedLoaderMock.mock.calls[0]?.[0]).toBeInstanceOf(Promise)
+  })
+})
diff --git a/packages/preact-router/tests/navigate.test.tsx b/packages/preact-router/tests/navigate.test.tsx
new file mode 100644
index 00000000000..2fcbfe0a54b
--- /dev/null
+++ b/packages/preact-router/tests/navigate.test.tsx
@@ -0,0 +1,110 @@
+import { afterEach, describe, expect, test, vi } from 'vitest'
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '../src'
+
+afterEach(() => {
+  vi.clearAllMocks()
+})
+
+function createTestRouter(initialPath: string = '/') {
+  const history = createMemoryHistory({ initialEntries: [initialPath] })
+
+  const rootRoute = createRootRoute({})
+  const indexRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/',
+  })
+  const postsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/posts',
+  })
+  const postIdRoute = createRoute({
+    getParentRoute: () => postsRoute,
+    path: '/$slug',
+  })
+  const projectRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/p',
+  })
+  const projectIdRoute = createRoute({
+    getParentRoute: () => projectRoute,
+    path: '/$projectId',
+  })
+  const projectVersionRoute = createRoute({
+    getParentRoute: () => projectIdRoute,
+    path: '/$version',
+  })
+  const projectFrameRoute = createRoute({
+    getParentRoute: () => projectVersionRoute,
+    path: '/$framework',
+  })
+
+  const routeTree = rootRoute.addChildren([
+    indexRoute,
+    postsRoute.addChildren([postIdRoute]),
+    projectRoute.addChildren([
+      projectIdRoute.addChildren([
+        projectVersionRoute.addChildren([projectFrameRoute]),
+      ]),
+    ]),
+  ])
+  const router = createRouter({ routeTree, history })
+
+  return { router }
+}
+
+describe('router.navigate with single path param', () => {
+  test('should change $slug from "tanner" to "tkdodo"', async () => {
+    const { router } = createTestRouter('/posts/tanner')
+
+    await router.load()
+
+    expect(router.state.location.pathname).toBe('/posts/tanner')
+
+    await router.navigate({
+      to: '/posts/$slug',
+      params: { slug: 'tkdodo' },
+    })
+    await router.invalidate()
+
+    expect(router.state.location.pathname).toBe('/posts/tkdodo')
+  })
+
+  test('should change $slug using function syntax', async () => {
+    const { router } = createTestRouter('/posts/tanner')
+
+    await router.load()
+
+    expect(router.state.location.pathname).toBe('/posts/tanner')
+
+    await router.navigate({
+      to: '/posts/$slug',
+      params: (p: any) => ({ ...p, slug: 'tkdodo' }),
+    })
+    await router.invalidate()
+
+    expect(router.state.location.pathname).toBe('/posts/tkdodo')
+  })
+})
+
+describe('router.navigate with multiple path params', () => {
+  test('should change $projectId from "router" to "query"', async () => {
+    const { router } = createTestRouter('/p/router/v1/react')
+
+    await router.load()
+
+    expect(router.state.location.pathname).toBe('/p/router/v1/react')
+
+    await router.navigate({
+      to: '/p/$projectId/$version/$framework',
+      params: { projectId: 'query' },
+    })
+    await router.invalidate()
+
+    expect(router.state.location.pathname).toBe('/p/query/v1/react')
+  })
+})
diff --git a/packages/preact-router/tests/not-found.test.tsx b/packages/preact-router/tests/not-found.test.tsx
new file mode 100644
index 00000000000..1e2f49971e3
--- /dev/null
+++ b/packages/preact-router/tests/not-found.test.tsx
@@ -0,0 +1,60 @@
+import { afterEach, describe, expect, test } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/preact'
+import {
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '../src'
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('Not Found', () => {
+  test('renders notFoundComponent on root route when no match', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+      notFoundComponent: () => <div>Page not found!</div>,
+    })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => <div>Index</div>,
+    })
+    const routeTree = rootRoute.addChildren([indexRoute])
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/does-not-exist'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const notFound = await screen.findByText('Page not found!')
+    expect(notFound).toBeInTheDocument()
+  })
+
+  test('renders defaultNotFoundComponent when no route-level handler', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => <div>Index</div>,
+    })
+    const routeTree = rootRoute.addChildren([indexRoute])
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/does-not-exist'] }),
+      defaultNotFoundComponent: () => <div>Default 404</div>,
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const notFound = await screen.findByText('Default 404')
+    expect(notFound).toBeInTheDocument()
+  })
+})
diff --git a/packages/preact-router/tests/router.test.tsx b/packages/preact-router/tests/router.test.tsx
new file mode 100644
index 00000000000..830265edf9c
--- /dev/null
+++ b/packages/preact-router/tests/router.test.tsx
@@ -0,0 +1,110 @@
+import { afterEach, describe, expect, test, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/preact'
+import {
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '../src'
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('Router', () => {
+  test('renders the root route', async () => {
+    const rootRoute = createRootRoute({
+      component: () => <div>Root</div>,
+    })
+    const routeTree = rootRoute.addChildren([])
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const rootElement = await screen.findByText('Root')
+    expect(rootElement).toBeInTheDocument()
+  })
+
+  test('renders the index route', async () => {
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => <div>Index page</div>,
+    })
+    const routeTree = rootRoute.addChildren([indexRoute])
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const indexElement = await screen.findByText('Index page')
+    expect(indexElement).toBeInTheDocument()
+  })
+
+  test('renders a nested route', async () => {
+    const rootRoute = createRootRoute()
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => <div>Index</div>,
+    })
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: () => <div>About page</div>,
+    })
+    const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/about'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const aboutElement = await screen.findByText('About page')
+    expect(aboutElement).toBeInTheDocument()
+  })
+
+  test('renders deeply nested routes', async () => {
+    const rootRoute = createRootRoute()
+    const parentRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/parent',
+      component: () => (
+        <div>
+          Parent
+          <Outlet />
+        </div>
+      ),
+    })
+    const childRoute = createRoute({
+      getParentRoute: () => parentRoute,
+      path: '/child',
+      component: () => <div>Child</div>,
+    })
+    const routeTree = rootRoute.addChildren([
+      parentRoute.addChildren([childRoute]),
+    ])
+    const router = createRouter({
+      routeTree,
+      history: createMemoryHistory({ initialEntries: ['/parent/child'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    const parentElement = await screen.findByText('Parent')
+    expect(parentElement).toBeInTheDocument()
+    const childElement = await screen.findByText('Child')
+    expect(childElement).toBeInTheDocument()
+  })
+})
+
+// Need Outlet import
+import { Outlet } from '../src'
diff --git a/packages/preact-router/tests/setupTests.tsx b/packages/preact-router/tests/setupTests.tsx
new file mode 100644
index 00000000000..2b1381c5b72
--- /dev/null
+++ b/packages/preact-router/tests/setupTests.tsx
@@ -0,0 +1,5 @@
+import '@testing-library/jest-dom/vitest'
+import { vi } from 'vitest'
+
+// Mock window.scrollTo to silence errors in tests
+window.scrollTo = vi.fn()
diff --git a/packages/preact-router/tests/useBlocker.test.tsx b/packages/preact-router/tests/useBlocker.test.tsx
new file mode 100644
index 00000000000..1ae23646921
--- /dev/null
+++ b/packages/preact-router/tests/useBlocker.test.tsx
@@ -0,0 +1,137 @@
+import { afterEach, describe, expect, test, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/preact'
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  useBlocker,
+} from '../src'
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('useBlocker', () => {
+  test('does not block when condition is false', async () => {
+    function UnblockedComponent() {
+      useBlocker({ shouldBlockFn: () => false })
+
+      return (
+        <div>
+          <h1>Home</h1>
+          <Link to="/about">Go to About</Link>
+        </div>
+      )
+    }
+
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: UnblockedComponent,
+    })
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: () => <h1>About</h1>,
+    })
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, aboutRoute]),
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    expect(await screen.findByText('Home')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Go to About'))
+
+    expect(await screen.findByText('About')).toBeInTheDocument()
+  })
+
+  test('blocks navigation when shouldBlockFn returns true (non-resolver)', async () => {
+    function BlockedComponent() {
+      useBlocker({ shouldBlockFn: () => true })
+
+      return (
+        <div>
+          <h1>Home</h1>
+          <Link to="/about">Go to About</Link>
+        </div>
+      )
+    }
+
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: BlockedComponent,
+    })
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: () => <h1>About</h1>,
+    })
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, aboutRoute]),
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    expect(await screen.findByText('Home')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Go to About'))
+
+    // Should still be on home since navigation is blocked
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    expect(screen.queryByText('About')).not.toBeInTheDocument()
+  })
+
+  test('does not block when disabled is true', async () => {
+    function BlockedComponent() {
+      useBlocker({ shouldBlockFn: () => true, disabled: true })
+
+      return (
+        <div>
+          <h1>Home</h1>
+          <Link to="/about">Go to About</Link>
+        </div>
+      )
+    }
+
+    const rootRoute = createRootRoute({
+      component: () => <Outlet />,
+    })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: BlockedComponent,
+    })
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: () => <h1>About</h1>,
+    })
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, aboutRoute]),
+      history: createMemoryHistory({ initialEntries: ['/'] }),
+    })
+
+    render(<RouterProvider router={router} />)
+
+    expect(await screen.findByText('Home')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Go to About'))
+
+    expect(await screen.findByText('About')).toBeInTheDocument()
+  })
+})
diff --git a/packages/preact-router/tests/useCanGoBack.test.tsx b/packages/preact-router/tests/useCanGoBack.test.tsx
new file mode 100644
index 00000000000..0f9b8aa59e3
--- /dev/null
+++ b/packages/preact-router/tests/useCanGoBack.test.tsx
@@ -0,0 +1,92 @@
+import { afterEach, describe, expect, test } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/preact'
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  useCanGoBack,
+  useLocation,
+  useRouter,
+} from '../src'
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('useCanGoBack', () => {
+  function setup({
+    initialEntries = ['/'],
+  }: {
+    initialEntries?: Array<string>
+  } = {}) {
+    function RootComponent() {
+      const router = useRouter()
+      const location = useLocation()
+      const canGoBack = useCanGoBack()
+
+      expect(canGoBack).toBe(location.pathname === '/' ? false : true)
+
+      return (
+        <>
+          <button onClick={() => router.history.back()}>Back</button>
+          <Link to="/">Home</Link>
+          <Link to="/about">About</Link>
+          <Outlet />
+        </>
+      )
+    }
+
+    const rootRoute = createRootRoute({
+      component: RootComponent,
+    })
+    const indexRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/',
+      component: () => <h1>IndexTitle</h1>,
+    })
+    const aboutRoute = createRoute({
+      getParentRoute: () => rootRoute,
+      path: '/about',
+      component: () => <h1>AboutTitle</h1>,
+    })
+
+    const router = createRouter({
+      routeTree: rootRoute.addChildren([indexRoute, aboutRoute]),
+      history: createMemoryHistory({ initialEntries }),
+    })
+
+    return render(<RouterProvider router={router} />)
+  }
+
+  test('when no location behind', async () => {
+    setup()
+
+    const indexTitle = await screen.findByText('IndexTitle')
+    expect(indexTitle).toBeInTheDocument()
+
+    const aboutLink = await screen.findByText('About')
+    fireEvent.click(aboutLink)
+
+    const aboutTitle = await screen.findByText('AboutTitle')
+    expect(aboutTitle).toBeInTheDocument()
+  })
+
+  test('when location behind', async () => {
+    setup({
+      initialEntries: ['/', '/about'],
+    })
+
+    const aboutTitle = await screen.findByText('AboutTitle')
+    expect(aboutTitle).toBeInTheDocument()
+
+    const backButton = await screen.findByText('Back')
+    fireEvent.click(backButton)
+
+    const indexTitle = await screen.findByText('IndexTitle')
+    expect(indexTitle).toBeInTheDocument()
+  })
+})
diff --git a/packages/preact-router/tests/useParams.test.tsx b/packages/preact-router/tests/useParams.test.tsx
new file mode 100644
index 00000000000..4bd8150113b
--- /dev/null
+++ b/packages/preact-router/tests/useParams.test.tsx
@@ -0,0 +1,103 @@
+import { afterEach, expect, test, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/preact'
+import {
+  Link,
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  useParams,
+} from '../src'
+
+afterEach(() => {
+  cleanup()
+})
+
+test('useParams returns params for the current route', async () => {
+  const rootRoute = createRootRoute()
+  const postsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: 'posts',
+    component: () => (
+      <div>
+        <h1>Posts</h1>
+        <Outlet />
+      </div>
+    ),
+  })
+  const postRoute = createRoute({
+    getParentRoute: () => postsRoute,
+    path: '$postId',
+    component: PostComponent,
+  })
+
+  function PostComponent() {
+    const params = useParams({ from: postRoute.fullPath })
+    return (
+      <div>
+        <span data-testid="post-id">{params.postId}</span>
+      </div>
+    )
+  }
+
+  const routeTree = rootRoute.addChildren([
+    postsRoute.addChildren([postRoute]),
+  ])
+  const router = createRouter({
+    routeTree,
+    history: createMemoryHistory({ initialEntries: ['/posts/123'] }),
+  })
+
+  render(<RouterProvider router={router} />)
+
+  await act(() => router.load())
+
+  const postId = await screen.findByTestId('post-id')
+  expect(postId.textContent).toBe('123')
+})
+
+test('useParams with parsed params', async () => {
+  const rootRoute = createRootRoute()
+  const postsRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: 'posts',
+    component: () => (
+      <div>
+        <Outlet />
+      </div>
+    ),
+  })
+  const postRoute = createRoute({
+    getParentRoute: () => postsRoute,
+    path: '$postId',
+    params: {
+      parse: (params) => ({
+        ...params,
+        postId: params.postId === 'one' ? '1' : params.postId,
+      }),
+    },
+    component: PostComponent,
+  })
+
+  function PostComponent() {
+    const params = useParams({ from: postRoute.fullPath })
+    return <span data-testid="post-id">{params.postId}</span>
+  }
+
+  const routeTree = rootRoute.addChildren([
+    postsRoute.addChildren([postRoute]),
+  ])
+  const router = createRouter({
+    routeTree,
+    history: createMemoryHistory({ initialEntries: ['/posts/one'] }),
+  })
+
+  render(<RouterProvider router={router} />)
+
+  await act(() => router.load())
+
+  const postId = await screen.findByTestId('post-id')
+  expect(postId.textContent).toBe('1')
+})
diff --git a/packages/preact-router/tests/utils.ts b/packages/preact-router/tests/utils.ts
new file mode 100644
index 00000000000..cdc7ff82bd0
--- /dev/null
+++ b/packages/preact-router/tests/utils.ts
@@ -0,0 +1,56 @@
+import type { Mock } from 'vitest'
+
+export function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+export function createTimer() {
+  let time = Date.now()
+
+  return {
+    start: () => {
+      time = Date.now()
+    },
+    getTime: () => {
+      return Date.now() - time
+    },
+  }
+}
+
+export const getIntersectionObserverMock = ({
+  observe,
+  disconnect,
+}: {
+  observe: Mock
+  disconnect: Mock
+}) => {
+  return class IO implements IntersectionObserver {
+    root: Document | Element | null
+    rootMargin: string
+    thresholds: Array<number>
+    constructor(
+      _cb: IntersectionObserverCallback,
+      options?: IntersectionObserverInit,
+    ) {
+      this.root = options?.root ?? null
+      this.rootMargin = options?.rootMargin ?? '0px'
+      this.thresholds = options?.threshold ?? ([0] as any)
+    }
+
+    takeRecords(): Array<IntersectionObserverEntry> {
+      return []
+    }
+    unobserve(): void {}
+    observe(): void {
+      observe()
+    }
+    disconnect(): void {
+      disconnect()
+    }
+  }
+}
+
+export function getSearchParamsFromURI(uri: string) {
+  const [, paramString] = uri.split('?')
+  return new URLSearchParams(paramString)
+}
diff --git a/packages/preact-router/tsconfig.json b/packages/preact-router/tsconfig.json
new file mode 100644
index 00000000000..914f4e88c0a
--- /dev/null
+++ b/packages/preact-router/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "include": ["src", "tests", "vite.config.ts", "eslint.config.ts"]
+}
diff --git a/packages/preact-router/tsconfig.legacy.json b/packages/preact-router/tsconfig.legacy.json
new file mode 100644
index 00000000000..b90fc83e04c
--- /dev/null
+++ b/packages/preact-router/tsconfig.legacy.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src"]
+}
diff --git a/packages/preact-router/vite.config.ts b/packages/preact-router/vite.config.ts
new file mode 100644
index 00000000000..fde309b6b13
--- /dev/null
+++ b/packages/preact-router/vite.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import preact from '@preact/preset-vite'
+import { tanstackViteConfig } from '@tanstack/config/vite'
+import packageJson from './package.json'
+
+const config = defineConfig({
+  plugins: [preact()],
+  // Add 'development' condition for tests to resolve @tanstack/router-core/isServer
+  // to the development export (isServer = undefined) instead of node (isServer = true)
+  ...(process.env.VITEST && {
+    resolve: {
+      conditions: ['development'],
+    },
+  }),
+  test: {
+    name: packageJson.name,
+    dir: './tests',
+    watch: false,
+    environment: 'jsdom',
+    setupFiles: ['./tests/setupTests.tsx'],
+    typecheck: { enabled: true },
+  },
+})
+
+export default mergeConfig(
+  config,
+  tanstackViteConfig({
+    entry: [
+      './src/index.tsx',
+      './src/index.dev.tsx',
+    ],
+    srcDir: './src',
+    cjs: false,
+  }),
+)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ed222422805..4606f0c661f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,7 @@ overrides:
   '@tanstack/start-client-core': workspace:*
   '@tanstack/start-server-core': workspace:*
   '@tanstack/start-storage-context': workspace:*
+  '@tanstack/preact-router': workspace:*
   '@tanstack/vue-router': workspace:*
   '@tanstack/vue-router-devtools': workspace:*
   '@tanstack/eslint-plugin-router': workspace:*
@@ -11546,6 +11547,40 @@ importers:
         specifier: ^7.3.1
         version: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)
 
+  packages/preact-router:
+    dependencies:
+      '@tanstack/history':
+        specifier: workspace:*
+        version: link:../history
+      '@tanstack/preact-store':
+        specifier: ^0.10.2
+        version: 0.10.2(preact@10.28.3)
+      '@tanstack/router-core':
+        specifier: workspace:*
+        version: link:../router-core
+      isbot:
+        specifier: ^5.1.22
+        version: 5.1.28
+      tiny-invariant:
+        specifier: ^1.3.3
+        version: 1.3.3
+      tiny-warning:
+        specifier: ^1.0.3
+        version: 1.0.3
+    devDependencies:
+      '@preact/preset-vite':
+        specifier: ^2.9.4
+        version: 2.10.3(@babel/core@7.28.5)(preact@10.28.3)(rollup@4.55.3)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))
+      '@testing-library/jest-dom':
+        specifier: ^6.6.3
+        version: 6.6.3
+      '@testing-library/preact':
+        specifier: ^3.2.4
+        version: 3.2.4(preact@10.28.3)
+      preact:
+        specifier: ^10.25.0
+        version: 10.28.3
+
   packages/react-router:
     dependencies:
       '@tanstack/history':
@@ -12635,6 +12670,10 @@ packages:
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/compat-data@7.27.5':
     resolution: {integrity: sha512-KiRAp/VoJaWkkte84TvUd9qjdbZAdiqyvMxrGl1N6vzFogKmaLgoM3L1kgtLicp2HP5fBJS8JrZKLVIZGVJAVg==}
     engines: {node: '>=6.9.0'}
@@ -12647,6 +12686,10 @@ packages:
     resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/generator@7.29.1':
+    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-annotate-as-pure@7.27.3':
     resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
     engines: {node: '>=6.9.0'}
@@ -12687,6 +12730,10 @@ packages:
     resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-module-imports@7.28.6':
+    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-module-transforms@7.28.3':
     resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
     engines: {node: '>=6.9.0'}
@@ -12701,6 +12748,10 @@ packages:
     resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-plugin-utils@7.28.6':
+    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-replace-supers@7.27.1':
     resolution: {integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==}
     engines: {node: '>=6.9.0'}
@@ -12732,6 +12783,11 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.29.0':
+    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/plugin-proposal-decorators@7.25.9':
     resolution: {integrity: sha512-smkNLL/O1ezy9Nhy4CNosc4Va+1wo5w4gzSZeLe6y6dM4mmHfYOCPolXQPHQxonZCF+ZyebxN9vqOolkYrSn5g==}
     engines: {node: '>=6.9.0'}
@@ -12762,6 +12818,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-syntax-jsx@7.28.6':
+    resolution: {integrity: sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-syntax-typescript@7.27.1':
     resolution: {integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==}
     engines: {node: '>=6.9.0'}
@@ -12786,6 +12848,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-transform-react-jsx-development@7.27.1':
+    resolution: {integrity: sha512-ykDdF5yI4f1WrAolLqeF3hmYU12j9ntLQl/AOG1HAS21jxyg1Q0/J/tpREuYLfatGdGmXp/3yS0ZA76kOlVq9Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-transform-react-jsx-self@7.25.9':
     resolution: {integrity: sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==}
     engines: {node: '>=6.9.0'}
@@ -12810,6 +12878,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-transform-react-jsx@7.28.6':
+    resolution: {integrity: sha512-61bxqhiRfAACulXSLd/GxqmAedUSrRZIu/cbaT18T1CetkTmtDN15it7i80ru4DVqRK1WMxQhXs+Lf9kajm5Ow==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-transform-typescript@7.27.1':
     resolution: {integrity: sha512-Q5sT5+O4QUebHdbwKedFBEwRLb02zJ7r4A5Gg2hUoLuU3FjdMcyqcywqUrLCaDsFCxzokf7u9kuy7qz51YUuAg==}
     engines: {node: '>=6.9.0'}
@@ -12842,10 +12916,18 @@ packages:
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.28.6':
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/traverse@7.28.5':
     resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/traverse@7.29.0':
+    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.28.4':
     resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
     engines: {node: '>=6.9.0'}
@@ -12854,6 +12936,10 @@ packages:
     resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+
   '@better-auth/core@1.3.27':
     resolution: {integrity: sha512-3Sfdax6MQyronY+znx7bOsfQHI6m1SThvJWb0RDscFEAhfqLy95k1sl+/PgGyg0cwc2cUXoEiAOSqYdFYrg3vA==}
 
@@ -15631,6 +15717,29 @@ packages:
   '@poppinss/exception@1.2.2':
     resolution: {integrity: sha512-m7bpKCD4QMlFCjA/nKTs23fuvoVFoA83brRKmObCUNmi/9tVu8Ve3w4YQAnJu4q3Tjf5fr685HYIC/IA2zHRSg==}
 
+  '@preact/preset-vite@2.10.3':
+    resolution: {integrity: sha512-1SiS+vFItpkNdBs7q585PSAIln0wBeBdcpJYbzPs1qipsb/FssnkUioNXuRsb8ZnU8YEQHr+3v8+/mzWSnTQmg==}
+    peerDependencies:
+      '@babel/core': 7.x
+      vite: ^7.3.1
+
+  '@prefresh/babel-plugin@0.5.2':
+    resolution: {integrity: sha512-AOl4HG6dAxWkJ5ndPHBgBa49oo/9bOiJuRDKHLSTyH+Fd9x00shTXpdiTj1W41l6oQIwUOAgJeHMn4QwIDpHkA==}
+
+  '@prefresh/core@1.5.9':
+    resolution: {integrity: sha512-IKBKCPaz34OFVC+adiQ2qaTF5qdztO2/4ZPf4KsRTgjKosWqxVXmEbxCiUydYZRY8GVie+DQlKzQr9gt6HQ+EQ==}
+    peerDependencies:
+      preact: ^10.0.0 || ^11.0.0-0
+
+  '@prefresh/utils@1.2.1':
+    resolution: {integrity: sha512-vq/sIuN5nYfYzvyayXI4C2QkprfNaHUQ9ZX+3xLD8nL3rWyzpxOm1+K7RtMbhd+66QcaISViK7amjnheQ/4WZw==}
+
+  '@prefresh/vite@2.4.11':
+    resolution: {integrity: sha512-/XjURQqdRiCG3NpMmWqE9kJwrg9IchIOWHzulCfqg2sRe/8oQ1g5De7xrk9lbqPIQLn7ntBkKdqWXIj4E9YXyg==}
+    peerDependencies:
+      preact: ^10.4.0 || ^11.0.0-0
+      vite: ^7.3.1
+
   '@prisma/adapter-libsql@7.0.0':
     resolution: {integrity: sha512-RspyVP5FgvNhsb4XdpbcUfiWWh/JXucTxzLUVKlrL/sLYQ50Mxx855cElncWjl9u1chaLC5AOLqYC4wNH8XOzA==}
 
@@ -16472,6 +16581,10 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/pluginutils@4.2.1':
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+
   '@rollup/pluginutils@5.1.4':
     resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
     engines: {node: '>=14.0.0'}
@@ -17448,6 +17561,11 @@ packages:
     resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
     engines: {node: '>=12'}
 
+  '@tanstack/preact-store@0.10.2':
+    resolution: {integrity: sha512-fe2XUWlomNczbyMaOk4TtMRfIUq3Pn4S/jgGAS6jYOCMKGjHNrwhdTA4EtGeG86DMxPL7NyObOsNy/6rA4dqCw==}
+    peerDependencies:
+      preact: ^10.0.0
+
   '@tanstack/publish-config@0.2.1':
     resolution: {integrity: sha512-URVXmXwlZXL75AFyvyOORef1tv2f16dEaFntwLYnBHoKLQMxyWYRzQrnXooxO1xf+GidJuDSZSC6Rc9UX1aK7g==}
     engines: {node: '>=18'}
@@ -17532,6 +17650,9 @@ packages:
   '@tanstack/store@0.8.0':
     resolution: {integrity: sha512-Om+BO0YfMZe//X2z0uLF2j+75nQga6TpTJgLJQBiq85aOyZNIhkCgleNcud2KQg4k4v9Y9l+Uhru3qWMPGTOzQ==}
 
+  '@tanstack/store@0.8.1':
+    resolution: {integrity: sha512-PtOisLjUZPz5VyPRSCGjNOlwTvabdTBQ2K80DpVL1chGVr35WRxfeavAPdNq6pm/t7F8GhoR2qtmkkqtCEtHYw==}
+
   '@tanstack/typedoc-config@0.3.0':
     resolution: {integrity: sha512-g7sfxscIq0wYUGtOLegnTbiMTsNiAz6r28CDgdZqIIjI1naWZoIlABpWH2qdI3IIJUDWvhOaVwAo6sfqzm6GsQ==}
     engines: {node: '>=18'}
@@ -17597,6 +17718,10 @@ packages:
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
 
+  '@testing-library/dom@8.20.1':
+    resolution: {integrity: sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==}
+    engines: {node: '>=12'}
+
   '@testing-library/dom@9.3.4':
     resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==}
     engines: {node: '>=14'}
@@ -17605,6 +17730,12 @@ packages:
     resolution: {integrity: sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
 
+  '@testing-library/preact@3.2.4':
+    resolution: {integrity: sha512-F+kJ243LP6VmEK1M809unzTE/ijg+bsMNuiRN0JEDIJBELKKDNhdgC/WrUSZ7klwJvtlO3wQZ9ix+jhObG07Fg==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      preact: '>=10 || ^10.0.0-alpha.0 || ^10.0.0-beta.0'
+
   '@testing-library/react@16.2.0':
     resolution: {integrity: sha512-2cSskAvA1QNtKc8Y9VJQRv0tm3hLVgxRGDB+KYhIaPQJ1I+RHbhIXcM+zClKXzMes/wshsMVzf4B9vS4IZpqDQ==}
     engines: {node: '>=18'}
@@ -18720,6 +18851,11 @@ packages:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
 
+  babel-plugin-transform-hook-names@1.0.2:
+    resolution: {integrity: sha512-5gafyjyyBTTdX/tQQ0hRgu4AhNHG/hqWi0ZZmg2xvs2FgRkJXzDNKBZCyoYqgFkovfDrgM8OoKg8karoUvWeCw==}
+    peerDependencies:
+      '@babel/core': ^7.12.10
+
   babel-plugin-vue-jsx-hmr@1.0.0:
     resolution: {integrity: sha512-XRq+XTD4bub6HkavELMhihvLX2++JkSBAxRXlqQK32b+Tb0S9PEqxrDSMpOEZ1iGyOaJZj9Y0uU/FzICdyL9MA==}
 
@@ -21982,6 +22118,9 @@ packages:
     resolution: {integrity: sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==}
     hasBin: true
 
+  node-html-parser@6.1.13:
+    resolution: {integrity: sha512-qIsTMOY4C/dAa5Q5vsobRpOOvPfC4pB61UVW2uSwZNUp0QU/jCekTal1vMmbO0DgdHeLUJpv/ARmDqErVxA3Sg==}
+
   node-machine-id@1.1.12:
     resolution: {integrity: sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==}
 
@@ -22466,6 +22605,9 @@ packages:
   preact@10.24.3:
     resolution: {integrity: sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==}
 
+  preact@10.28.3:
+    resolution: {integrity: sha512-tCmoRkPQLpBeWzpmbhryairGnhW9tKV6c6gr/w+RhoRoKEJwsjzipwp//1oCpGPOchvSLaAPlpcJi9MwMmoPyA==}
+
   precinct@12.2.0:
     resolution: {integrity: sha512-NFBMuwIfaJ4SocE9YXPU/n4AcNSoFMVFjP72nvl3cx69j/ke61/hPOWFREVxLkFhhEGnA8ZuVfTqJBa+PK3b5w==}
     engines: {node: '>=18'}
@@ -23314,6 +23456,9 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  simple-code-frame@1.3.0:
+    resolution: {integrity: sha512-MB4pQmETUBlNs62BBeRjIFGeuy/x6gGKh7+eRUemn1rCFhqo7K+4slPqsyizCbcbYLnaYqaoZ2FWsZ/jN06D8w==}
+
   simple-git@3.28.0:
     resolution: {integrity: sha512-Rs/vQRwsn1ILH1oBUy8NucJlXmnnLeLCfcvbSehkPzbv3wwoFWIdtfd6Ndo6ZPhlPsCZ60CPI4rxurnwAa+a2w==}
 
@@ -23439,6 +23584,10 @@ packages:
   stack-trace@0.0.10:
     resolution: {integrity: sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==}
 
+  stack-trace@1.0.0-pre2:
+    resolution: {integrity: sha512-2ztBJRek8IVofG9DBJqdy2N5kulaacX30Nz7xmkYF6ale9WBVmIy6mFBchvGX7Vx/MyjBhx+Rcxqrj+dbOnQ6A==}
+    engines: {node: '>=16'}
+
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
@@ -24381,6 +24530,11 @@ packages:
       '@testing-library/jest-dom':
         optional: true
 
+  vite-prerender-plugin@0.5.12:
+    resolution: {integrity: sha512-EiwhbMn+flg14EysbLTmZSzq8NGTxhytgK3bf4aGRF1evWLGwZiHiUJ1KZDvbxgKbMf2pG6fJWGEa3UZXOnR1g==}
+    peerDependencies:
+      vite: ^7.3.1
+
   vite-tsconfig-paths@5.1.4:
     resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==}
     peerDependencies:
@@ -24978,6 +25132,12 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
+  '@babel/code-frame@7.29.0':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
   '@babel/compat-data@7.27.5': {}
 
   '@babel/core@7.28.5':
@@ -25008,6 +25168,14 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
+  '@babel/generator@7.29.1':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
   '@babel/helper-annotate-as-pure@7.27.3':
     dependencies:
       '@babel/types': 7.28.5
@@ -25073,6 +25241,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-module-imports@7.28.6':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
@@ -25088,6 +25263,8 @@ snapshots:
 
   '@babel/helper-plugin-utils@7.27.1': {}
 
+  '@babel/helper-plugin-utils@7.28.6': {}
+
   '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
@@ -25119,6 +25296,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.5
 
+  '@babel/parser@7.29.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
   '@babel/plugin-proposal-decorators@7.25.9(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
@@ -25152,6 +25333,11 @@ snapshots:
       '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
@@ -25181,6 +25367,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-react-jsx-development@7.27.1(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-transform-react-jsx': 7.28.6(@babel/core@7.28.5)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/plugin-transform-react-jsx-self@7.25.9(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
@@ -25201,6 +25394,17 @@ snapshots:
       '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-transform-react-jsx@7.28.6(@babel/core@7.28.5)':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.28.5)
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/plugin-transform-typescript@7.27.1(@babel/core@7.28.5)':
     dependencies:
       '@babel/core': 7.28.5
@@ -25255,6 +25459,12 @@ snapshots:
       '@babel/parser': 7.28.5
       '@babel/types': 7.28.5
 
+  '@babel/template@7.28.6':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+
   '@babel/traverse@7.28.5':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -25267,6 +25477,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/traverse@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/types@7.28.4':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
@@ -25277,6 +25499,11 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
   '@better-auth/core@1.3.27':
     dependencies:
       better-call: 1.0.19
@@ -28027,6 +28254,43 @@ snapshots:
 
   '@poppinss/exception@1.2.2': {}
 
+  '@preact/preset-vite@2.10.3(@babel/core@7.28.5)(preact@10.28.3)(rollup@4.55.3)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-transform-react-jsx': 7.28.6(@babel/core@7.28.5)
+      '@babel/plugin-transform-react-jsx-development': 7.27.1(@babel/core@7.28.5)
+      '@prefresh/vite': 2.4.11(preact@10.28.3)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))
+      '@rollup/pluginutils': 5.1.4(rollup@4.55.3)
+      babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.28.5)
+      debug: 4.4.3
+      picocolors: 1.1.1
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)
+      vite-prerender-plugin: 0.5.12(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))
+    transitivePeerDependencies:
+      - preact
+      - rollup
+      - supports-color
+
+  '@prefresh/babel-plugin@0.5.2': {}
+
+  '@prefresh/core@1.5.9(preact@10.28.3)':
+    dependencies:
+      preact: 10.28.3
+
+  '@prefresh/utils@1.2.1': {}
+
+  '@prefresh/vite@2.4.11(preact@10.28.3)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@prefresh/babel-plugin': 0.5.2
+      '@prefresh/core': 1.5.9(preact@10.28.3)
+      '@prefresh/utils': 1.2.1
+      '@rollup/pluginutils': 4.2.1
+      preact: 10.28.3
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - supports-color
+
   '@prisma/adapter-libsql@7.0.0':
     dependencies:
       '@libsql/client': 0.8.1
@@ -28949,6 +29213,11 @@ snapshots:
     optionalDependencies:
       rollup: 4.55.3
 
+  '@rollup/pluginutils@4.2.1':
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+
   '@rollup/pluginutils@5.1.4(rollup@4.55.3)':
     dependencies:
       '@types/estree': 1.0.8
@@ -29944,6 +30213,11 @@ snapshots:
     dependencies:
       remove-accents: 0.5.0
 
+  '@tanstack/preact-store@0.10.2(preact@10.28.3)':
+    dependencies:
+      '@tanstack/store': 0.8.1
+      preact: 10.28.3
+
   '@tanstack/publish-config@0.2.1':
     dependencies:
       '@commitlint/parse': 19.8.1
@@ -30036,6 +30310,8 @@ snapshots:
 
   '@tanstack/store@0.8.0': {}
 
+  '@tanstack/store@0.8.1': {}
+
   '@tanstack/typedoc-config@0.3.0(typescript@5.9.3)':
     dependencies:
       typedoc: 0.28.14(typescript@5.9.3)
@@ -30141,6 +30417,17 @@ snapshots:
       picocolors: 1.1.1
       pretty-format: 27.5.1
 
+  '@testing-library/dom@8.20.1':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/runtime': 7.26.7
+      '@types/aria-query': 5.0.4
+      aria-query: 5.1.3
+      chalk: 4.1.2
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      pretty-format: 27.5.1
+
   '@testing-library/dom@9.3.4':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -30162,6 +30449,11 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
+  '@testing-library/preact@3.2.4(preact@10.28.3)':
+    dependencies:
+      '@testing-library/dom': 8.20.1
+      preact: 10.28.3
+
   '@testing-library/react@16.2.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@babel/runtime': 7.26.7
@@ -31797,6 +32089,10 @@ snapshots:
       cosmiconfig: 7.1.0
       resolve: 1.22.10
 
+  babel-plugin-transform-hook-names@1.0.2(@babel/core@7.28.5):
+    dependencies:
+      '@babel/core': 7.28.5
+
   babel-plugin-vue-jsx-hmr@1.0.0:
     dependencies:
       '@babel/core': 7.28.5
@@ -35017,8 +35313,8 @@ snapshots:
 
   magicast@0.3.5:
     dependencies:
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
       source-map-js: 1.2.1
     optional: true
 
@@ -35605,6 +35901,11 @@ snapshots:
 
   node-gyp-build@4.8.4: {}
 
+  node-html-parser@6.1.13:
+    dependencies:
+      css-select: 5.1.0
+      he: 1.2.0
+
   node-machine-id@1.1.12: {}
 
   node-mock-http@1.0.4: {}
@@ -36149,6 +36450,8 @@ snapshots:
 
   preact@10.24.3: {}
 
+  preact@10.28.3: {}
+
   precinct@12.2.0:
     dependencies:
       '@dependents/detective-less': 5.0.1
@@ -37188,6 +37491,10 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  simple-code-frame@1.3.0:
+    dependencies:
+      kolorist: 1.8.0
+
   simple-git@3.28.0:
     dependencies:
       '@kwsites/file-exists': 1.1.1
@@ -37324,6 +37631,8 @@ snapshots:
 
   stack-trace@0.0.10: {}
 
+  stack-trace@1.0.0-pre2: {}
+
   stackback@0.0.2: {}
 
   stackframe@1.3.4: {}
@@ -38211,6 +38520,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vite-prerender-plugin@0.5.12(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)):
+    dependencies:
+      kolorist: 1.8.0
+      magic-string: 0.30.21
+      node-html-parser: 6.1.13
+      simple-code-frame: 1.3.0
+      source-map: 0.7.6
+      stack-trace: 1.0.0-pre2
+      vite: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)
+
   vite-tsconfig-paths@5.1.4(typescript@5.8.2)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)):
     dependencies:
       debug: 4.4.3

From 6173eed5273457173aed24555065e710084426da Mon Sep 17 00:00:00 2001
From: Jovi De Croock <decroockjovi@gmail.com>
Date: Thu, 19 Feb 2026 08:42:35 +0100
Subject: [PATCH 2/3] Add example + e2e test

---
 e2e/preact-router/basic/index.html            |  12 +
 e2e/preact-router/basic/package.json          |  25 ++
 e2e/preact-router/basic/playwright.config.ts  |  33 +++
 e2e/preact-router/basic/src/main.tsx          |  67 +++++
 e2e/preact-router/basic/tests/app.spec.ts     |  14 ++
 .../basic/tests/setup/global.setup.ts         |   6 +
 .../basic/tests/setup/global.teardown.ts      |   6 +
 e2e/preact-router/basic/tsconfig.json         |  20 ++
 e2e/preact-router/basic/vite.config.js        |   6 +
 examples/preact/basic/.gitignore              |  10 +
 examples/preact/basic/.vscode/settings.json   |  11 +
 examples/preact/basic/README.md               |  45 ++++
 examples/preact/basic/index.html              |  12 +
 examples/preact/basic/package.json            |  24 ++
 examples/preact/basic/src/main.tsx            | 230 ++++++++++++++++++
 examples/preact/basic/src/posts.lazy.tsx      |  35 +++
 examples/preact/basic/src/posts.ts            |  32 +++
 examples/preact/basic/src/styles.css          |  21 ++
 examples/preact/basic/tsconfig.json           |  13 +
 examples/preact/basic/vite.config.js          |   8 +
 packages/preact-router/package.json           |  16 +-
 packages/preact-router/src/Suspense.tsx       |  46 +---
 .../preact-router/src/ssr/RouterClient.tsx    |  22 ++
 .../preact-router/src/ssr/RouterServer.tsx    |   8 +
 packages/preact-router/src/ssr/client.ts      |   2 +
 .../src/ssr/defaultRenderHandler.tsx          |  12 +
 .../src/ssr/defaultStreamHandler.tsx          |  13 +
 .../src/ssr/renderRouterToStream.tsx          |  37 +++
 .../src/ssr/renderRouterToString.tsx          |  36 +++
 packages/preact-router/src/ssr/server.ts      |   6 +
 .../preact-router/tests/Suspense.test.tsx     |  13 +-
 packages/preact-router/tests/ssr.test.tsx     |  77 ++++++
 packages/preact-router/vite.config.ts         |   2 +
 pnpm-lock.yaml                                |  83 +++++++
 pnpm-workspace.yaml                           |   2 +
 35 files changed, 955 insertions(+), 50 deletions(-)
 create mode 100644 e2e/preact-router/basic/index.html
 create mode 100644 e2e/preact-router/basic/package.json
 create mode 100644 e2e/preact-router/basic/playwright.config.ts
 create mode 100644 e2e/preact-router/basic/src/main.tsx
 create mode 100644 e2e/preact-router/basic/tests/app.spec.ts
 create mode 100644 e2e/preact-router/basic/tests/setup/global.setup.ts
 create mode 100644 e2e/preact-router/basic/tests/setup/global.teardown.ts
 create mode 100644 e2e/preact-router/basic/tsconfig.json
 create mode 100644 e2e/preact-router/basic/vite.config.js
 create mode 100644 examples/preact/basic/.gitignore
 create mode 100644 examples/preact/basic/.vscode/settings.json
 create mode 100644 examples/preact/basic/README.md
 create mode 100644 examples/preact/basic/index.html
 create mode 100644 examples/preact/basic/package.json
 create mode 100644 examples/preact/basic/src/main.tsx
 create mode 100644 examples/preact/basic/src/posts.lazy.tsx
 create mode 100644 examples/preact/basic/src/posts.ts
 create mode 100644 examples/preact/basic/src/styles.css
 create mode 100644 examples/preact/basic/tsconfig.json
 create mode 100644 examples/preact/basic/vite.config.js
 create mode 100644 packages/preact-router/src/ssr/RouterClient.tsx
 create mode 100644 packages/preact-router/src/ssr/RouterServer.tsx
 create mode 100644 packages/preact-router/src/ssr/client.ts
 create mode 100644 packages/preact-router/src/ssr/defaultRenderHandler.tsx
 create mode 100644 packages/preact-router/src/ssr/defaultStreamHandler.tsx
 create mode 100644 packages/preact-router/src/ssr/renderRouterToStream.tsx
 create mode 100644 packages/preact-router/src/ssr/renderRouterToString.tsx
 create mode 100644 packages/preact-router/src/ssr/server.ts
 create mode 100644 packages/preact-router/tests/ssr.test.tsx

diff --git a/e2e/preact-router/basic/index.html b/e2e/preact-router/basic/index.html
new file mode 100644
index 00000000000..a2252c34539
--- /dev/null
+++ b/e2e/preact-router/basic/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TanStack Router Preact E2E</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/e2e/preact-router/basic/package.json b/e2e/preact-router/basic/package.json
new file mode 100644
index 00000000000..6ecfe3ed70a
--- /dev/null
+++ b/e2e/preact-router/basic/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "tanstack-router-e2e-preact-basic",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "dev:e2e": "vite",
+    "build": "vite build && tsc --noEmit",
+    "preview": "vite preview",
+    "start": "vite",
+    "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
+  },
+  "dependencies": {
+    "@tanstack/preact-router": "workspace:^",
+    "preact": "^10.25.0",
+    "preact-render-to-string": "^6.6.5"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.1",
+    "@preact/preset-vite": "^2.9.4",
+    "@tanstack/router-e2e-utils": "workspace:^",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  }
+}
diff --git a/e2e/preact-router/basic/playwright.config.ts b/e2e/preact-router/basic/playwright.config.ts
new file mode 100644
index 00000000000..5ad36c825bd
--- /dev/null
+++ b/e2e/preact-router/basic/playwright.config.ts
@@ -0,0 +1,33 @@
+import { defineConfig, devices } from '@playwright/test'
+import {
+  getDummyServerPort,
+  getTestServerPort,
+} from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = await getTestServerPort(packageJson.name)
+const EXTERNAL_PORT = await getDummyServerPort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+
+export default defineConfig({
+  testDir: './tests',
+  workers: 1,
+  reporter: [['line']],
+  globalSetup: './tests/setup/global.setup.ts',
+  globalTeardown: './tests/setup/global.teardown.ts',
+  use: {
+    baseURL,
+  },
+  webServer: {
+    command: `VITE_NODE_ENV=\"test\" VITE_SERVER_PORT=${PORT} VITE_EXTERNAL_PORT=${EXTERNAL_PORT} pnpm build && pnpm preview --port ${PORT}`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})
diff --git a/e2e/preact-router/basic/src/main.tsx b/e2e/preact-router/basic/src/main.tsx
new file mode 100644
index 00000000000..44811cbc9af
--- /dev/null
+++ b/e2e/preact-router/basic/src/main.tsx
@@ -0,0 +1,67 @@
+import { render } from 'preact'
+import { useMemo } from 'preact/hooks'
+import {
+  Await,
+  Link,
+  Outlet,
+  RouterProvider,
+  Suspense,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/preact-router'
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <div>
+      <nav>
+        <Link to="/" activeOptions={{ exact: true }}>
+          Home
+        </Link>{' '}
+        <Link to="/slow">Slow</Link>
+      </nav>
+      <Outlet />
+    </div>
+  ),
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: () => <h1 data-testid="home">Home</h1>,
+})
+
+const slowRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/slow',
+  component: SlowRouteComponent,
+})
+
+function SlowRouteComponent() {
+  const promise = useMemo(
+    () =>
+      new Promise<string>((resolve) => {
+        setTimeout(() => resolve('Loaded!'), 200)
+      }),
+    [],
+  )
+
+  return (
+    <div>
+      <h1 data-testid="slow-title">Slow Route</h1>
+      <Suspense fallback={<div data-testid="suspense-fallback">Loading...</div>}>
+        <Await promise={promise}>
+          {(value) => <div data-testid="suspense-content">{value}</div>}
+        </Await>
+      </Suspense>
+    </div>
+  )
+}
+
+const routeTree = rootRoute.addChildren([indexRoute, slowRoute])
+
+const router = createRouter({
+  routeTree,
+})
+
+render(<RouterProvider router={router} />, document.getElementById('app')!)
diff --git a/e2e/preact-router/basic/tests/app.spec.ts b/e2e/preact-router/basic/tests/app.spec.ts
new file mode 100644
index 00000000000..165037ec49d
--- /dev/null
+++ b/e2e/preact-router/basic/tests/app.spec.ts
@@ -0,0 +1,14 @@
+import { expect, test } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/')
+})
+
+test('shows suspense fallback and then resolved content', async ({ page }) => {
+  await expect(page.getByTestId('home')).toBeVisible()
+
+  await page.getByRole('link', { name: 'Slow' }).click()
+  await expect(page.getByTestId('slow-title')).toBeVisible()
+  await expect(page.getByTestId('suspense-fallback')).toBeVisible()
+  await expect(page.getByTestId('suspense-content')).toHaveText('Loaded!')
+})
diff --git a/e2e/preact-router/basic/tests/setup/global.setup.ts b/e2e/preact-router/basic/tests/setup/global.setup.ts
new file mode 100644
index 00000000000..3593d10ab90
--- /dev/null
+++ b/e2e/preact-router/basic/tests/setup/global.setup.ts
@@ -0,0 +1,6 @@
+import { e2eStartDummyServer } from '@tanstack/router-e2e-utils'
+import packageJson from '../../package.json' with { type: 'json' }
+
+export default async function setup() {
+  await e2eStartDummyServer(packageJson.name)
+}
diff --git a/e2e/preact-router/basic/tests/setup/global.teardown.ts b/e2e/preact-router/basic/tests/setup/global.teardown.ts
new file mode 100644
index 00000000000..62fd79911cc
--- /dev/null
+++ b/e2e/preact-router/basic/tests/setup/global.teardown.ts
@@ -0,0 +1,6 @@
+import { e2eStopDummyServer } from '@tanstack/router-e2e-utils'
+import packageJson from '../../package.json' with { type: 'json' }
+
+export default async function teardown() {
+  await e2eStopDummyServer(packageJson.name)
+}
diff --git a/e2e/preact-router/basic/tsconfig.json b/e2e/preact-router/basic/tsconfig.json
new file mode 100644
index 00000000000..c74cfd97707
--- /dev/null
+++ b/e2e/preact-router/basic/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "target": "ESNext",
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"],
+    "paths": {
+      "@tanstack/router-e2e-utils": ["../../e2e-utils/src/index.ts"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/e2e/preact-router/basic/vite.config.js b/e2e/preact-router/basic/vite.config.js
new file mode 100644
index 00000000000..bfe110c0597
--- /dev/null
+++ b/e2e/preact-router/basic/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+export default defineConfig({
+  plugins: [preact()],
+})
diff --git a/examples/preact/basic/.gitignore b/examples/preact/basic/.gitignore
new file mode 100644
index 00000000000..8354e4d50d5
--- /dev/null
+++ b/examples/preact/basic/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
\ No newline at end of file
diff --git a/examples/preact/basic/.vscode/settings.json b/examples/preact/basic/.vscode/settings.json
new file mode 100644
index 00000000000..00b5278e580
--- /dev/null
+++ b/examples/preact/basic/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}
diff --git a/examples/preact/basic/README.md b/examples/preact/basic/README.md
new file mode 100644
index 00000000000..a58d907bf87
--- /dev/null
+++ b/examples/preact/basic/README.md
@@ -0,0 +1,45 @@
+# TanStack Router - Basic Example
+
+A basic example demonstrating the fundamentals of TanStack Router.
+
+- [TanStack Router Docs](https://tanstack.com/router)
+
+## Start a new project based on this example
+
+To start a new project based on this example, run:
+
+```sh
+npx gitpick TanStack/router/tree/main/examples/react/basic basic
+```
+
+## Getting Started
+
+Install dependencies:
+
+```sh
+pnpm install
+```
+
+Start the development server:
+
+```sh
+pnpm dev
+```
+
+## Build
+
+Build for production:
+
+```sh
+pnpm build
+```
+
+## About This Example
+
+This example demonstrates:
+
+- Basic routing setup
+- Route configuration
+- Navigation
+- Route parameters
+- TanStack Router DevTools
diff --git a/examples/preact/basic/index.html b/examples/preact/basic/index.html
new file mode 100644
index 00000000000..9b6335c0ac1
--- /dev/null
+++ b/examples/preact/basic/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/preact/basic/package.json b/examples/preact/basic/package.json
new file mode 100644
index 00000000000..8f2d540f9d2
--- /dev/null
+++ b/examples/preact/basic/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "tanstack-router-react-example-basic",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3000",
+    "build": "vite build && tsc --noEmit",
+    "preview": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/preact-router": "^1.160.0",
+    "preact": "^10.25.0",
+    "preact-render-to-string": "^6.6.5",
+    "redaxios": "^0.5.1",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.10.3",
+    "typescript": "^5.7.2",
+    "vite": "^7.3.1"
+  }
+}
diff --git a/examples/preact/basic/src/main.tsx b/examples/preact/basic/src/main.tsx
new file mode 100644
index 00000000000..870b82756b3
--- /dev/null
+++ b/examples/preact/basic/src/main.tsx
@@ -0,0 +1,230 @@
+import {render} from 'preact'
+import {
+  ErrorComponent,
+  Link,
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/preact-router'
+import { NotFoundError, fetchPost, fetchPosts } from './posts'
+import type { ErrorComponentProps } from '@tanstack/preact-router'
+import './styles.css'
+
+const rootRoute = createRootRoute({
+  component: RootComponent,
+  notFoundComponent: () => {
+    return (
+      <div>
+        <p>This is the notFoundComponent configured on root route</p>
+        <Link to="/">Start Over</Link>
+      </div>
+    )
+  },
+})
+
+function RootComponent() {
+  return (
+    <>
+      <div className="p-2 flex gap-2 text-lg border-b">
+        <Link
+          to="/"
+          activeProps={{
+            className: 'font-bold',
+          }}
+          activeOptions={{ exact: true }}
+        >
+          Home
+        </Link>{' '}
+        <Link
+          to="/posts"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Posts
+        </Link>{' '}
+        <Link
+          to="/route-a"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Pathless Layout
+        </Link>{' '}
+        <Link
+          // @ts-expect-error
+          to="/this-route-does-not-exist"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          This Route Does Not Exist
+        </Link>
+      </div>
+      <Outlet />
+    </>
+  )
+}
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: IndexComponent,
+})
+
+function IndexComponent() {
+  return (
+    <div className="p-2">
+      <h3>Welcome Home!</h3>
+    </div>
+  )
+}
+
+export const postsLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: 'posts',
+  loader: () => fetchPosts(),
+}).lazy(() => import('./posts.lazy').then((d) => d.Route))
+
+const postsIndexRoute = createRoute({
+  getParentRoute: () => postsLayoutRoute,
+  path: '/',
+  component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+  return <div>Select a post.</div>
+}
+
+const postRoute = createRoute({
+  getParentRoute: () => postsLayoutRoute,
+  path: '$postId',
+  errorComponent: PostErrorComponent,
+  loader: ({ params }) => fetchPost(params.postId),
+  component: PostComponent,
+})
+
+function PostErrorComponent({ error }: ErrorComponentProps) {
+  if (error instanceof NotFoundError) {
+    return <div>{error.message}</div>
+  }
+
+  return <ErrorComponent error={error} />
+}
+
+function PostComponent() {
+  const post = postRoute.useLoaderData()
+
+  return (
+    <div className="space-y-2">
+      <h4 className="text-xl font-bold">{post.title}</h4>
+      <hr className="opacity-20" />
+      <div className="text-sm">{post.body}</div>
+    </div>
+  )
+}
+
+const pathlessLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  id: '_pathlessLayout',
+  component: PathlessLayoutComponent,
+})
+
+function PathlessLayoutComponent() {
+  return (
+    <div className="p-2">
+      <div className="border-b">I'm a pathless layout</div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  )
+}
+
+const nestedPathlessLayout2Route = createRoute({
+  getParentRoute: () => pathlessLayoutRoute,
+  id: '_nestedPathlessLayout',
+  component: PathlessLayout2Component,
+})
+
+function PathlessLayout2Component() {
+  return (
+    <div>
+      <div>I'm a nested pathless layout</div>
+      <div className="flex gap-2 border-b">
+        <Link
+          to="/route-a"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Go to Route A
+        </Link>
+        <Link
+          to="/route-b"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Go to Route B
+        </Link>
+      </div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  )
+}
+
+const pathlessLayoutARoute = createRoute({
+  getParentRoute: () => nestedPathlessLayout2Route,
+  path: '/route-a',
+  component: PathlessLayoutAComponent,
+})
+
+function PathlessLayoutAComponent() {
+  return <div>I'm route A!</div>
+}
+
+const pathlessLayoutBRoute = createRoute({
+  getParentRoute: () => nestedPathlessLayout2Route,
+  path: '/route-b',
+  component: PathlessLayoutBComponent,
+})
+
+function PathlessLayoutBComponent() {
+  return <div>I'm route B!</div>
+}
+
+const routeTree = rootRoute.addChildren([
+  postsLayoutRoute.addChildren([postRoute, postsIndexRoute]),
+  pathlessLayoutRoute.addChildren([
+    nestedPathlessLayout2Route.addChildren([
+      pathlessLayoutARoute,
+      pathlessLayoutBRoute,
+    ]),
+  ]),
+  indexRoute,
+])
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  defaultStaleTime: 5000,
+  scrollRestoration: true,
+})
+
+// Register things for typesafety
+declare module '@tanstack/preact-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+  render(<RouterProvider router={router} />, rootElement)
+}
diff --git a/examples/preact/basic/src/posts.lazy.tsx b/examples/preact/basic/src/posts.lazy.tsx
new file mode 100644
index 00000000000..1e4a4daf6fa
--- /dev/null
+++ b/examples/preact/basic/src/posts.lazy.tsx
@@ -0,0 +1,35 @@
+import { Link, Outlet, createLazyRoute } from '@tanstack/preact-router'
+
+export const Route = createLazyRoute('/posts')({
+  component: PostsLayoutComponent,
+})
+
+function PostsLayoutComponent() {
+  const posts = Route.useLoaderData()
+
+  return (
+    <div className="p-2 flex gap-2">
+      <ul className="list-disc pl-4">
+        {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map(
+          (post) => {
+            return (
+              <li key={post.id} className="whitespace-nowrap">
+                <Link
+                  to="/posts/$postId"
+                  params={{
+                    postId: post.id,
+                  }}
+                  className="block py-1 px-2 text-blue-600 hover:opacity-75"
+                  activeProps={{ className: 'font-bold underline' }}
+                >
+                  <div>{post.title.substring(0, 20)}</div>
+                </Link>
+              </li>
+            )
+          },
+        )}
+      </ul>
+      <Outlet />
+    </div>
+  )
+}
diff --git a/examples/preact/basic/src/posts.ts b/examples/preact/basic/src/posts.ts
new file mode 100644
index 00000000000..54d62e57886
--- /dev/null
+++ b/examples/preact/basic/src/posts.ts
@@ -0,0 +1,32 @@
+import axios from 'redaxios'
+
+export class NotFoundError extends Error {}
+
+type PostType = {
+  id: string
+  title: string
+  body: string
+}
+
+export const fetchPosts = async () => {
+  console.info('Fetching posts...')
+  await new Promise((r) => setTimeout(r, 500))
+  return axios
+    .get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts')
+    .then((r) => r.data.slice(0, 10))
+}
+
+export const fetchPost = async (postId: string) => {
+  console.info(`Fetching post with id ${postId}...`)
+  await new Promise((r) => setTimeout(r, 500))
+  const post = await axios
+    .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+    .then((r) => r.data)
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (!post) {
+    throw new NotFoundError(`Post with id "${postId}" not found!`)
+  }
+
+  return post
+}
diff --git a/examples/preact/basic/src/styles.css b/examples/preact/basic/src/styles.css
new file mode 100644
index 00000000000..ce24a390c75
--- /dev/null
+++ b/examples/preact/basic/src/styles.css
@@ -0,0 +1,21 @@
+@import 'tailwindcss' source('../');
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+html {
+  color-scheme: light dark;
+}
+* {
+  @apply border-gray-200 dark:border-gray-800;
+}
+body {
+  @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
+}
diff --git a/examples/preact/basic/tsconfig.json b/examples/preact/basic/tsconfig.json
new file mode 100644
index 00000000000..10dbda00f82
--- /dev/null
+++ b/examples/preact/basic/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact",
+    "target": "ESNext",
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "skipLibCheck": true
+  }
+}
diff --git a/examples/preact/basic/vite.config.js b/examples/preact/basic/vite.config.js
new file mode 100644
index 00000000000..1b24376e976
--- /dev/null
+++ b/examples/preact/basic/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [tailwindcss(), preact()],
+})
diff --git a/packages/preact-router/package.json b/packages/preact-router/package.json
index 025be04a64b..f875d8d2a65 100644
--- a/packages/preact-router/package.json
+++ b/packages/preact-router/package.json
@@ -44,6 +44,18 @@
         "default": "./dist/esm/index.js"
       }
     },
+    "./ssr/server": {
+      "import": {
+        "types": "./dist/esm/ssr/server.d.ts",
+        "default": "./dist/esm/ssr/server.js"
+      }
+    },
+    "./ssr/client": {
+      "import": {
+        "types": "./dist/esm/ssr/client.d.ts",
+        "default": "./dist/esm/ssr/client.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -59,13 +71,15 @@
     "@tanstack/preact-store": "^0.10.2",
     "@tanstack/router-core": "workspace:*",
     "isbot": "^5.1.22",
+    "preact-render-to-string": "^6.6.5",
+    "preact-suspense": "^0.2.0",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.9.4",
-    "@testing-library/preact": "^3.2.4",
     "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/preact": "^3.2.4",
     "preact": "^10.25.0"
   },
   "peerDependencies": {
diff --git a/packages/preact-router/src/Suspense.tsx b/packages/preact-router/src/Suspense.tsx
index 66d2372d408..109e2c1c746 100644
--- a/packages/preact-router/src/Suspense.tsx
+++ b/packages/preact-router/src/Suspense.tsx
@@ -1,45 +1 @@
-import { Component } from 'preact'
-import type { ComponentChildren } from 'preact'
-
-interface SuspenseProps {
-  fallback?: ComponentChildren
-  children: ComponentChildren
-}
-
-interface SuspenseState {
-  pending: boolean
-}
-
-export class Suspense extends Component<SuspenseProps, SuspenseState> {
-  state = { pending: false }
-  _pendingPromises = new Set<Promise<any>>()
-
-  componentDidCatch(err: any) {
-    if (err && typeof err.then === 'function') {
-      // It's a thrown promise (suspense protocol)
-      this._pendingPromises.add(err)
-      this.setState({ pending: true })
-      err.then(
-        () => {
-          this._pendingPromises.delete(err)
-          if (this._pendingPromises.size === 0) {
-            this.setState({ pending: false })
-          }
-        },
-        () => {
-          this._pendingPromises.delete(err)
-          if (this._pendingPromises.size === 0) {
-            this.setState({ pending: false })
-          }
-        },
-      )
-    }
-  }
-
-  render() {
-    if (this.state.pending) {
-      return this.props.fallback ?? null
-    }
-    return this.props.children
-  }
-}
+export { Suspense } from 'preact-suspense'
diff --git a/packages/preact-router/src/ssr/RouterClient.tsx b/packages/preact-router/src/ssr/RouterClient.tsx
new file mode 100644
index 00000000000..3af3fa89acf
--- /dev/null
+++ b/packages/preact-router/src/ssr/RouterClient.tsx
@@ -0,0 +1,22 @@
+import { hydrate } from '@tanstack/router-core/ssr/client'
+import { Await } from '../awaited'
+import { RouterProvider } from '../RouterProvider'
+import type { AnyRouter } from '@tanstack/router-core'
+
+let hydrationPromise: Promise<void | Array<Array<void>>> | undefined
+
+export function RouterClient(props: { router: AnyRouter }) {
+  if (!hydrationPromise) {
+    if (!props.router.state.matches.length) {
+      hydrationPromise = hydrate(props.router)
+    } else {
+      hydrationPromise = Promise.resolve()
+    }
+  }
+  return (
+    <Await
+      promise={hydrationPromise}
+      children={() => <RouterProvider router={props.router} />}
+    />
+  )
+}
diff --git a/packages/preact-router/src/ssr/RouterServer.tsx b/packages/preact-router/src/ssr/RouterServer.tsx
new file mode 100644
index 00000000000..5004ac44057
--- /dev/null
+++ b/packages/preact-router/src/ssr/RouterServer.tsx
@@ -0,0 +1,8 @@
+import { RouterProvider } from '../RouterProvider'
+import type { AnyRouter } from '@tanstack/router-core'
+
+export function RouterServer<TRouter extends AnyRouter>(props: {
+  router: TRouter
+}) {
+  return <RouterProvider router={props.router} />
+}
diff --git a/packages/preact-router/src/ssr/client.ts b/packages/preact-router/src/ssr/client.ts
new file mode 100644
index 00000000000..c6eadb15215
--- /dev/null
+++ b/packages/preact-router/src/ssr/client.ts
@@ -0,0 +1,2 @@
+export { RouterClient } from './RouterClient'
+export * from '@tanstack/router-core/ssr/client'
diff --git a/packages/preact-router/src/ssr/defaultRenderHandler.tsx b/packages/preact-router/src/ssr/defaultRenderHandler.tsx
new file mode 100644
index 00000000000..a1f11787076
--- /dev/null
+++ b/packages/preact-router/src/ssr/defaultRenderHandler.tsx
@@ -0,0 +1,12 @@
+import { defineHandlerCallback } from '@tanstack/router-core/ssr/server'
+import { renderRouterToString } from './renderRouterToString'
+import { RouterServer } from './RouterServer'
+
+export const defaultRenderHandler = defineHandlerCallback(
+  ({ router, responseHeaders }) =>
+    renderRouterToString({
+      router,
+      responseHeaders,
+      children: <RouterServer router={router} />,
+    }),
+)
diff --git a/packages/preact-router/src/ssr/defaultStreamHandler.tsx b/packages/preact-router/src/ssr/defaultStreamHandler.tsx
new file mode 100644
index 00000000000..b220a8dd747
--- /dev/null
+++ b/packages/preact-router/src/ssr/defaultStreamHandler.tsx
@@ -0,0 +1,13 @@
+import { defineHandlerCallback } from '@tanstack/router-core/ssr/server'
+import { RouterServer } from './RouterServer'
+import { renderRouterToStream } from './renderRouterToStream'
+
+export const defaultStreamHandler = defineHandlerCallback(
+  ({ request, router, responseHeaders }) =>
+    renderRouterToStream({
+      request,
+      router,
+      responseHeaders,
+      children: <RouterServer router={router} />,
+    }),
+)
diff --git a/packages/preact-router/src/ssr/renderRouterToStream.tsx b/packages/preact-router/src/ssr/renderRouterToStream.tsx
new file mode 100644
index 00000000000..43c3c00822b
--- /dev/null
+++ b/packages/preact-router/src/ssr/renderRouterToStream.tsx
@@ -0,0 +1,37 @@
+import { renderToStringAsync } from 'preact-render-to-string'
+import type { AnyRouter } from '@tanstack/router-core'
+import type { VNode } from 'preact'
+
+export const renderRouterToStream = async ({
+  router,
+  responseHeaders,
+  children,
+}: {
+  request: Request
+  router: AnyRouter
+  responseHeaders: Headers
+  children: VNode
+}) => {
+  try {
+    let html = await renderToStringAsync(children)
+    router.serverSsr!.setRenderFinished()
+
+    const injectedHtml = router.serverSsr!.takeBufferedHtml()
+    if (injectedHtml) {
+      html = html.replace(`</body>`, () => `${injectedHtml}</body>`)
+    }
+
+    return new Response(`<!DOCTYPE html>${html}`, {
+      status: router.state.statusCode,
+      headers: responseHeaders,
+    })
+  } catch (error) {
+    console.error('Render to stream error:', error)
+    return new Response('Internal Server Error', {
+      status: 500,
+      headers: responseHeaders,
+    })
+  } finally {
+    router.serverSsr?.cleanup()
+  }
+}
diff --git a/packages/preact-router/src/ssr/renderRouterToString.tsx b/packages/preact-router/src/ssr/renderRouterToString.tsx
new file mode 100644
index 00000000000..2cf90ca388f
--- /dev/null
+++ b/packages/preact-router/src/ssr/renderRouterToString.tsx
@@ -0,0 +1,36 @@
+import { renderToStringAsync } from 'preact-render-to-string'
+import type { VNode } from 'preact'
+import type { AnyRouter } from '@tanstack/router-core'
+
+export const renderRouterToString = async ({
+  router,
+  responseHeaders,
+  children,
+}: {
+  router: AnyRouter
+  responseHeaders: Headers
+  children: VNode
+}) => {
+  try {
+    let html = await renderToStringAsync(children)
+    router.serverSsr!.setRenderFinished()
+
+    const injectedHtml = router.serverSsr!.takeBufferedHtml()
+    if (injectedHtml) {
+      html = html.replace(`</body>`, () => `${injectedHtml}</body>`)
+    }
+
+    return new Response(`<!DOCTYPE html>${html}`, {
+      status: router.state.statusCode,
+      headers: responseHeaders,
+    })
+  } catch (error) {
+    console.error('Render to string error:', error)
+    return new Response('Internal Server Error', {
+      status: 500,
+      headers: responseHeaders,
+    })
+  } finally {
+    router.serverSsr?.cleanup()
+  }
+}
diff --git a/packages/preact-router/src/ssr/server.ts b/packages/preact-router/src/ssr/server.ts
new file mode 100644
index 00000000000..b4e84970c47
--- /dev/null
+++ b/packages/preact-router/src/ssr/server.ts
@@ -0,0 +1,6 @@
+export { RouterServer } from './RouterServer'
+export { defaultRenderHandler } from './defaultRenderHandler'
+export { defaultStreamHandler } from './defaultStreamHandler'
+export { renderRouterToStream } from './renderRouterToStream'
+export { renderRouterToString } from './renderRouterToString'
+export * from '@tanstack/router-core/ssr/server'
diff --git a/packages/preact-router/tests/Suspense.test.tsx b/packages/preact-router/tests/Suspense.test.tsx
index 3dd3a010cc9..b813b3492d6 100644
--- a/packages/preact-router/tests/Suspense.test.tsx
+++ b/packages/preact-router/tests/Suspense.test.tsx
@@ -1,13 +1,18 @@
 import { afterEach, describe, expect, test, vi } from 'vitest'
-import { cleanup, render, screen, act } from '@testing-library/preact'
-import { h, Component } from 'preact'
-import { Suspense } from '../src/Suspense'
+import { act, cleanup, render, screen } from '@testing-library/preact'
+import { Component } from 'preact'
+import { Suspense as PreactSuspense } from 'preact-suspense'
+import { Suspense } from '../src'
 
 afterEach(() => {
   cleanup()
 })
 
 describe('Suspense', () => {
+  test('re-exports Suspense from preact-suspense', () => {
+    expect(Suspense).toBe(PreactSuspense)
+  })
+
   test('renders children when no promise is thrown', () => {
     render(
       <Suspense fallback={<div>Loading...</div>}>
@@ -46,7 +51,7 @@ describe('Suspense', () => {
     // but for this test the promise is resolved so componentDidCatch won't be triggered again
   })
 
-  test('renders fallback as null when no fallback prop is provided', async () => {
+  test('renders fallback as null when no fallback prop is provided', () => {
     let resolve!: () => void
     const promise = new Promise<void>((r) => {
       resolve = r
diff --git a/packages/preact-router/tests/ssr.test.tsx b/packages/preact-router/tests/ssr.test.tsx
new file mode 100644
index 00000000000..9b43450f789
--- /dev/null
+++ b/packages/preact-router/tests/ssr.test.tsx
@@ -0,0 +1,77 @@
+import { describe, expect, test, vi } from 'vitest'
+import { renderRouterToStream } from '../src/ssr/renderRouterToStream'
+import { renderRouterToString } from '../src/ssr/renderRouterToString'
+
+function createMockRouter() {
+  return {
+    state: {
+      statusCode: 200,
+    },
+    options: {},
+    serverSsr: {
+      cleanup: vi.fn(),
+      isSerializationFinished: vi.fn(() => true),
+      isDehydrated: vi.fn(() => true),
+      onRenderFinished: vi.fn(),
+      onSerializationFinished: vi.fn(),
+      setRenderFinished: vi.fn(),
+      takeBufferedHtml: vi.fn(() => '<script>window.__SSR__=1</script>'),
+    },
+  } as any
+}
+
+describe('preact-router ssr', () => {
+  test('renderRouterToString returns html with doctype and buffered injections', async () => {
+    const router = createMockRouter()
+
+    const response = await renderRouterToString({
+      router,
+      responseHeaders: new Headers(),
+      children: (
+        <html>
+          <body>
+            <div id="app">Hello SSR</div>
+          </body>
+        </html>
+      ),
+    })
+
+    const html = await response.text()
+
+    expect(response.status).toBe(200)
+    expect(html).toContain('<!DOCTYPE html>')
+    expect(html).toContain('Hello SSR')
+    expect(html).toContain('<script>window.__SSR__=1</script>')
+    expect(router.serverSsr.setRenderFinished).toHaveBeenCalledTimes(1)
+    expect(router.serverSsr.cleanup).toHaveBeenCalledTimes(1)
+  })
+
+  test('renderRouterToStream returns stream response with rendered html', async () => {
+    const router = createMockRouter()
+
+    const response = await renderRouterToStream({
+      request: new Request('http://localhost', {
+        headers: {
+          'User-Agent': 'tanstack-test-agent',
+        },
+      }),
+      router,
+      responseHeaders: new Headers(),
+      children: (
+        <html>
+          <body>
+            <div id="app">Hello Stream SSR</div>
+          </body>
+        </html>
+      ),
+    })
+
+    const html = await response.text()
+
+    expect(response.status).toBe(200)
+    expect(html).toContain('<html>')
+    expect(html).toContain('Hello Stream SSR')
+    expect(html).toContain('<script>window.__SSR__=1</script>')
+    expect(router.serverSsr.cleanup).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/packages/preact-router/vite.config.ts b/packages/preact-router/vite.config.ts
index fde309b6b13..467e0db13d1 100644
--- a/packages/preact-router/vite.config.ts
+++ b/packages/preact-router/vite.config.ts
@@ -28,6 +28,8 @@ export default mergeConfig(
     entry: [
       './src/index.tsx',
       './src/index.dev.tsx',
+      './src/ssr/client.ts',
+      './src/ssr/server.ts',
     ],
     srcDir: './src',
     cjs: false,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4606f0c661f..97469c9d434 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -168,6 +168,34 @@ importers:
         specifier: 4.0.3
         version: 4.0.3(@types/node@25.0.9)(rollup@4.55.3)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))
 
+  e2e/preact-router/basic:
+    dependencies:
+      '@tanstack/preact-router':
+        specifier: workspace:*
+        version: link:../../../packages/preact-router
+      preact:
+        specifier: ^10.25.0
+        version: 10.28.3
+      preact-render-to-string:
+        specifier: ^6.6.5
+        version: 6.6.5(preact@10.28.3)
+    devDependencies:
+      '@playwright/test':
+        specifier: ^1.57.0
+        version: 1.57.0
+      '@preact/preset-vite':
+        specifier: ^2.9.4
+        version: 2.10.3(@babel/core@7.28.5)(preact@10.28.3)(rollup@4.55.3)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))
+      '@tanstack/router-e2e-utils':
+        specifier: workspace:^
+        version: link:../../e2e-utils
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)
+
   e2e/react-router/basepath-file-based:
     dependencies:
       '@tanstack/react-router':
@@ -6000,6 +6028,37 @@ importers:
         specifier: ^5.1.4
         version: 5.1.4(typescript@5.9.2)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))
 
+  examples/preact/basic:
+    dependencies:
+      '@tailwindcss/vite':
+        specifier: ^4.1.18
+        version: 4.1.18(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))
+      '@tanstack/preact-router':
+        specifier: workspace:*
+        version: link:../../../packages/preact-router
+      preact:
+        specifier: ^10.25.0
+        version: 10.28.3
+      preact-render-to-string:
+        specifier: ^6.6.5
+        version: 6.6.5(preact@10.28.3)
+      redaxios:
+        specifier: ^0.5.1
+        version: 0.5.1
+      tailwindcss:
+        specifier: ^4.1.18
+        version: 4.1.18
+    devDependencies:
+      '@preact/preset-vite':
+        specifier: ^2.10.3
+        version: 2.10.3(@babel/core@7.28.5)(preact@10.28.3)(rollup@4.55.3)(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1))
+      typescript:
+        specifier: ^5.7.2
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.1
+        version: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(lightningcss@1.30.2)(sass-embedded@1.97.2)(sass@1.97.2)(terser@5.37.0)(tsx@4.20.3)(yaml@2.8.1)
+
   examples/react/authenticated-routes:
     dependencies:
       '@tailwindcss/vite':
@@ -11561,6 +11620,12 @@ importers:
       isbot:
         specifier: ^5.1.22
         version: 5.1.28
+      preact-render-to-string:
+        specifier: ^6.6.5
+        version: 6.6.5(preact@10.28.3)
+      preact-suspense:
+        specifier: ^0.2.0
+        version: 0.2.0(preact@10.28.3)
       tiny-invariant:
         specifier: ^1.3.3
         version: 1.3.3
@@ -22602,6 +22667,16 @@ packages:
     peerDependencies:
       preact: '>=10'
 
+  preact-render-to-string@6.6.5:
+    resolution: {integrity: sha512-O6MHzYNIKYaiSX3bOw0gGZfEbOmlIDtDfWwN1JJdc/T3ihzRT6tGGSEWE088dWrEDGa1u7101q+6fzQnO9XCPA==}
+    peerDependencies:
+      preact: '>=10 || >= 11.0.0-0'
+
+  preact-suspense@0.2.0:
+    resolution: {integrity: sha512-AyBb6lJa1+JbbDaGyBDxxJx+P/MG0nw3X/z2rZaF5h5qU6MX8TBGWxWOG/h50ob7fMkKX9+or2Qp8Mvlda3G9w==}
+    peerDependencies:
+      preact: ^10.0.0
+
   preact@10.24.3:
     resolution: {integrity: sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==}
 
@@ -36448,6 +36523,14 @@ snapshots:
     dependencies:
       preact: 10.24.3
 
+  preact-render-to-string@6.6.5(preact@10.28.3):
+    dependencies:
+      preact: 10.28.3
+
+  preact-suspense@0.2.0(preact@10.28.3):
+    dependencies:
+      preact: 10.28.3
+
   preact@10.24.3: {}
 
   preact@10.28.3: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index da7d07317b4..d4c5075c129 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -4,6 +4,7 @@ preferWorkspacePackages: true
 
 packages:
   - 'packages/*'
+  - 'examples/preact/*'
   - 'examples/react/*'
   - 'examples/solid/*'
   - 'examples/vue/*'
@@ -12,6 +13,7 @@ packages:
   - 'examples/react/router-monorepo-simple-lazy/packages/*'
   - 'e2e/e2e-utils'
   - 'e2e/react-router/*'
+  - 'e2e/preact-router/*'
   - 'e2e/solid-router/*'
   - 'e2e/vue-router/*'
   - 'e2e/react-start/*'

From edc0bfcc33478d5322f5681a41a2c0404ef7f064 Mon Sep 17 00:00:00 2001
From: Jovi De Croock <decroockjovi@gmail.com>
Date: Thu, 19 Feb 2026 08:44:22 +0100
Subject: [PATCH 3/3] Gitignore

---
 e2e/preact-router/basic/.gitignore           | 11 +++++++++++
 packages/preact-router/src/link.tsx          | 17 +++++++++--------
 packages/preact-router/src/typePrimitives.ts |  2 +-
 3 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 e2e/preact-router/basic/.gitignore

diff --git a/e2e/preact-router/basic/.gitignore b/e2e/preact-router/basic/.gitignore
new file mode 100644
index 00000000000..4d2da67b504
--- /dev/null
+++ b/e2e/preact-router/basic/.gitignore
@@ -0,0 +1,11 @@
+node_modules
+.DS_Store
+dist
+dist-hash
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/packages/preact-router/src/link.tsx b/packages/preact-router/src/link.tsx
index efb8d1059ff..d0991323611 100644
--- a/packages/preact-router/src/link.tsx
+++ b/packages/preact-router/src/link.tsx
@@ -43,7 +43,8 @@ export function useLinkProps<
   forwardedRef?: RefObject<Element>,
 ): any {
   const router = useRouter()
-  const innerRef = forwardedRef ?? useRef<Element>(null) as RefObject<any>
+  const innerRef = useRef<Element>(null) as RefObject<any>
+  const resolvedRef = forwardedRef ?? innerRef
 
   const _isServer = isServer ?? router.isServer
 
@@ -102,7 +103,7 @@ export function useLinkProps<
           }
           return {
             ...propsSafeToSpread,
-            ref: innerRef,
+            ref: resolvedRef,
             href: undefined,
             ...(children && { children }),
             ...(target && { target }),
@@ -114,7 +115,7 @@ export function useLinkProps<
 
         return {
           ...propsSafeToSpread,
-          ref: innerRef,
+          ref: resolvedRef,
           href: to,
           ...(children && { children }),
           ...(target && { target }),
@@ -225,7 +226,7 @@ export function useLinkProps<
     if (externalLink) {
       return {
         ...propsSafeToSpread,
-        ref: innerRef,
+        ref: resolvedRef,
         href: externalLink,
         ...(children && { children }),
         ...(target && { target }),
@@ -281,7 +282,7 @@ export function useLinkProps<
       ...resolvedActiveProps,
       ...resolvedInactiveProps,
       href: hrefOption?.href,
-      ref: innerRef,
+      ref: resolvedRef,
       disabled: !!disabled,
       target,
       ...(resolvedStyle && { style: resolvedStyle }),
@@ -457,7 +458,7 @@ export function useLinkProps<
   )
 
   useIntersectionObserver(
-    innerRef as RefObject<Element>,
+    resolvedRef as RefObject<Element>,
     preloadViewportIoCallback,
     intersectionObserverOptions,
     { disabled: !!disabled || !(preload === 'viewport') },
@@ -511,7 +512,7 @@ export function useLinkProps<
   if (externalLink) {
     return {
       ...propsSafeToSpread,
-      ref: innerRef,
+      ref: resolvedRef,
       href: externalLink,
       ...(children && { children }),
       ...(target && { target }),
@@ -568,7 +569,7 @@ export function useLinkProps<
     ...resolvedActiveProps,
     ...resolvedInactiveProps,
     href: hrefOption?.href,
-    ref: innerRef,
+    ref: resolvedRef,
     onClick: composeHandlers([onClick, handleClick]),
     onFocus: composeHandlers([onFocus, handleFocus]),
     onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
diff --git a/packages/preact-router/src/typePrimitives.ts b/packages/preact-router/src/typePrimitives.ts
index 317ab260c86..b28828178c9 100644
--- a/packages/preact-router/src/typePrimitives.ts
+++ b/packages/preact-router/src/typePrimitives.ts
@@ -66,7 +66,7 @@ export type ValidateUseParamsOptions<
     InferStrict<TOptions>,
     InferShouldThrow<TOptions>,
     InferSelected<TOptions>,
-    InferSelected<TOptions>
+    InferStructuralSharing<TOptions>
   >
 >
 export type ValidateLinkOptionsArray<