@eyeauras/workbench-react-router

Optional per-window React Router memory navigation, history commands, controls, and route breadcrumbs for @eyeauras/workbench-react hosts.

Install

npm install @eyeauras/[email protected] @eyeauras/[email protected] \
  @eyeauras/[email protected] react react-dom react-router monaco-editor@^0.52.2

Quickstart

Requires React Router 7, React/React DOM >=18 and a CSS-aware browser bundler. Mount the router in a React Workbench page, which supplies WorkbenchProvider:

import { createWorkbench } from "@eyeauras/workbench";
import { createReactWorkbenchPage } from "@eyeauras/workbench-react/core";
import { createWorkbenchMemoryRouter, WorkbenchRouterProvider } from "@eyeauras/workbench-react-router";
const host = document.createElement("div");
host.style.cssText = "width:100%;height:600px";
document.body.append(host);
const workbench = createWorkbench(host);
const navigation = createWorkbenchMemoryRouter([{ path: "/", element: <h1>Home</h1> }]);
workbench.registerPage(createReactWorkbenchPage({
  id: "application", title: "Application", render: () => <WorkbenchRouterProvider navigation={navigation} />,
}));
workbench.showPage("application");
export function dispose() { workbench.dispose(); navigation.dispose(); host.remove(); }

History is memory-based and local to this instance. The host owns navigation and disposes it after unmounting its page. See the shell quickstart for fonts and themes.

See the navigation guide for the route and lifecycle contract.