@eyeauras/workbench-react-router

可选的每个窗口 React 路由器内存导航、历史命令、控制和路由面包屑 页:1 @eyeauras/workbench-react 师曰.

安装

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

快速启动

需要React Router 7, React/React DOM QQ18和一个CSS-意识浏览器捆绑器. 在路由器中挂载 反应Workbench 页面,提供 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(); }

历史以记忆为基础,对于这个例子来说是地方性的。 主机拥有 navigation 之后处理 正在卸载其页面。 见 弹壳快速启动 字体和主题.

见 导航指南 路线和生命周期合同.