smolter
API

RouterApplication

Connect a router, flat route manifest, root data, and root components.

Compatibility

ReactAvailable in this renderer's browser integration.
React SSRAvailable to this renderer's SSR integration; browser event handlers run after hydration.
PreactAvailable in this renderer's browser integration.
Preact SSRAvailable to this renderer's SSR integration; browser event handlers run after hydration.

Import from @kasperrt/smolter/react @kasperrt/smolter/preact

Signature

function RouterApplication({
  root: initialRoot,
  document: documentMode,
  ...props
}: ApplicationProps): ReactNode;

Parameters

Pass router, routes, and root. Optional rootModule supplies the root page, Layout, metadata, links, and error boundary. entry is the browser script URL used by Scripts. document enables the root Layout for document rendering. An optional rootStore supplies a reusable root data store.

Returns

Provides RouterProvider and application context around the root page. When the root module has no default component, it renders Outlet. For document rendering, supply a Layout; document mode renders through that component.

Example

This lower-level component is useful when the application owns router construction. mountApplication handles browser mounting and hydration, and renderApplication handles server requests.

import { createDataRouter, RouterApplication } from "@kasperrt/smolter/preact";
import { render } from "preact";
import * as rootModule from "./root";
import { routes } from "./routes";

const router = createDataRouter(routes, { browser: true });
const container = document.getElementById("root")!;

render(
  <RouterApplication router={router} routes={routes} root={undefined} rootModule={rootModule} />,
  container,
);

Responsibilities

The component supplies context and observes the router; it does not itself load root data, install retained navigation, or configure transport endpoints. Use the mounting helpers for those integrations. It chooses the root ErrorBoundary when a snapshot has an error and the active route has no own boundary. In a manually constructed browser entry, both the routes and root module must be browser-safe; importing a server loader module directly does not automatically remove its dependencies.

View implementation ↗