RouterApplication
Connect a router, flat route manifest, root data, and root components.
Compatibility
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.