preact-router

@nano_kit/preact-router

The @nano_kit/preact-router package provides Preact integration for @nano_kit/router. It allows you to use the router's powerful features like code splitting, dependency injection, and state management directly within your Preact application.

Installation

pnpm add @nano_kit/store @nano_kit/router @nano_kit/preact @nano_kit/preact-router preact
# or
npm install @nano_kit/store @nano_kit/router @nano_kit/preact @nano_kit/preact-router preact
# or
yarn add @nano_kit/store @nano_kit/router @nano_kit/preact @nano_kit/preact-router preact

Quick Start

Basically, @nano_kit/preact-router re-exports everything from @nano_kit/router, so you can use all base router functions:

import { render } from 'preact'
import { browserNavigation, page, layout, loadable, router, Outlet, usePageSignal } from '@nano_kit/preact-router'
import { MainLayout } from './MainLayout'

/* Define routes config */
const routes = {
  home: '/',
  user: '/users/:id'
} as const

/* Create navigation */
const [$location, navigation] = browserNavigation(routes)

/* Define loader fallback */
const Loader = () => <div>Loading...</div>

/* Create page signal */
const $page = router($location, [
  layout(MainLayout, [
    page('home', loadable(() => import('./Home'), Loader)),
    page('user', loadable(() => import('./User'), Loader))
  ])
])

/* Root component */
function App() {
  const Page = usePageSignal($page)

  return Page ? <Page /> : null
}

/* Render App */
render(<App />, document.getElementById('root')!)

In MainLayout, use Outlet to render the matched child page:

import { Outlet } from '@nano_kit/preact-router'

export function MainLayout() {
  return (
    <div className="layout">
      <main>
        <Outlet />
      </main>
    </div>
  )
}

Documentation

For comprehensive guides, API reference, and integration patterns, visit the documentation website.