TanStack Router Devtools 完全指南安装、悬浮/嵌入模式与源码级实现解析【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/router本文基于 TanStack Router 官方文档 docs/router/devtools.md系统讲解 Router Devtools 的安装、四种接入方式根路由挂载、手动传入 router、Floating 悬浮模式、Panel 固定/嵌入模式以及全部可配置项并结合packages/react-router-devtools、packages/solid-router-devtools与packages/router-devtools-core的源码说明生产环境裁剪、localStorage 状态记忆、Shadow DOM 样式隔离等底层机制帮助你在调试路由问题时有据可依。为什么需要 DevtoolsTanStack Router 内置了专属的开发调试工具Devtools它能可视化路由器内部的全部运行状态。当你开始 TanStack Router 的开发之旅时Devtools 是排障利器在遇到路由行为异常时它可以帮你省去大量的手动调试时间。Devtools 是一个独立的可选包与路由库本体解耦按需安装即可。安装Devtools 作为独立包分发需要单独安装React 项目tanstack/react-router-devtoolsSolid 项目tanstack/solid-router-devtools以仓库中的 packages/react-router-devtools/package.json 为例该包当前版本为 1.167.1其 peer 依赖要求tanstack/react-routerworkspace 版本对齐、react 18.0.0 || 19.0.0与react-dom 18.0.0 || 19.0.0Node 引擎要求 20.19。值得注意的是它的sideEffects: false声明——配合入口处的开发环境判断下文详述可以确保生产构建中被 tree-shaking 干净移除。从源码结构看两个框架包React / Solid只是薄薄的一层适配壳真正的 UI 与状态逻辑收敛在同构的 packages/router-devtools-core 中这一点后文架构章节会展开。导入 Devtools 组件// React import { TanStackRouterDevtools } from tanstack/react-router-devtools // Solid import { TanStackRouterDevtools } from tanstack/solid-router-devtoolsTanStackRouterDevtools是默认的悬浮式组件它会在页面上渲染一个占位的div随后由核心类把真正的悬浮面板挂载进去。生产环境行为与 InProd 变体默认导出的TanStackRouterDevtools在开发环境之外会自动渲染为null即生产构建中它什么都不显示。这一行为直接体现在包入口 packages/react-router-devtools/src/index.tsexport const TanStackRouterDevtools process.env.NODE_ENV ! development ? function () { return null } : Devtools.TanStackRouterDevtools export const TanStackRouterDevtoolsInProd Devtools.TanStackRouterDevtools可以看到TanStackRouterDevtoolsprocess.env.NODE_ENV ! development时被替换为返回null的占位函数TanStackRouterDevtoolsInProd始终指向真实组件用于你确实希望在NODE_ENV production的环境里保留 Devtools 的场景它拥有与默认导出完全相同的选项。TanStackRouterDevtoolsPanel与TanStackRouterDevtoolsPanelInProd采用同样的模式。在根路由中使用最简单的方式让 Devtools 工作的最简单方式是把它渲染在根路由root route中或任意其他路由内。这样 Devtools 会自动连接到当前 Context 中的 router 实例——源码中通过useRouter()hook 从路由上下文解析出活动 router见 packages/react-router-devtools/src/TanStackRouterDevtools.tsx。Reactimport { createRootRoute, Outlet } from tanstack/react-router import { TanStackRouterDevtools } from tanstack/react-router-devtools export const Route createRootRoute({ component: () ( Outlet / TanStackRouterDevtools / / ), })Solidimport { createRootRoute, Outlet } from tanstack/solid-router import { TanStackRouterDevtools } from tanstack/solid-router-devtools export const Route createRootRoute({ component: () ( Outlet / TanStackRouterDevtools / / ), })手动传入 Router 实例如果你不想把 Devtools 放在RouterProvider或根路由内部可以给 Devtools 传入routerprop其值就是传给Router/RouterProvider组件的同一个实例。这样 Devtools 可以放在页面的任何位置function App() { return ( RouterProvider router{router} / TanStackRouterDevtools router{router} / / ) }React 与 Solid 的写法一致。从源码看这一prop 优先、hook 兜底的逻辑非常直接packages/react-router-devtools/src/TanStackRouterDevtools.tsx#L62-L63const hookRouter useRouter({ warn: false }) const activeRouter propsRouter ?? hookRouter并且组件内部通过useEffectReact/createEffectSolid持续调用devtools.setRouter()与devtools.setRouterState()保证 router 实例或状态变化时 Devtools 同步更新packages/react-router-devtools/src/TanStackRouterDevtools.tsx#L84-L111。Floating 悬浮模式Floating 模式将 Devtools 挂载为应用中的一个固定浮动元素并在屏幕角落提供一个切换按钮用于展开/收起面板。面板的开关状态会写入 localStorage跨页面刷新自动记忆。官方建议将组件尽可能放到应用的高层位置——离页面根部越近效果越好。function App() { return ( RouterProvider router{router} / TanStackRouterDevtools initialIsOpen{false} / / ) }localStorage 记忆的实现状态跨刷新保留并非营销话术源码可以佐证。核心组件 packages/router-devtools-core/src/FloatingTanStackRouterDevtools.tsx 使用了两个 localStorage keyconst [isOpen, setIsOpen] useLocalStorage( tanstackRouterDevtoolsOpen, initialIsOpen, ) const [devtoolsHeight, setDevtoolsHeight] useLocalStoragenumber | null( tanstackRouterDevtoolsHeight, null, )也就是说面板开合状态tanstackRouterDevtoolsOpen与拖拽调整后的面板高度tanstackRouterDevtoolsHeight都会被持久化。对应的读写工具是 packages/router-devtools-core/src/useLocalStorage.ts它用 Solid 的createSignal封装了 JSON 序列化存取并在localStorage读写抛错时静默降级因此即便在禁用存储的浏览器环境下也不会报错。拖拽调整高度与自动收起同一文件中还实现了面板的拖拽逻辑FloatingTanStackRouterDevtools.tsx#L91-L125仅响应鼠标左键按下拖拽拖拽过程中实时写入高度当拖到高度小于 70px 时自动关闭面板相当于向上收起手势未拖拽过拖手柄时面板默认高度为 500pxdevtoolsHeight() ?? 500。Floating 模式完整选项以下选项在 TanStackRouterDevtoolsCore.tsx#L7-L50 的类型定义中有对应注释与文档描述一致选项类型 / 默认值说明routerRouter要连接的 router 实例。不传时自动从路由上下文useRouter()解析initialIsOpenboolean默认false设为true时 Devtools 默认展开。注意首次打开状态之后以 localStorage 中记忆的值为准panelProps对象向面板附加属性如className、style与默认样式合并并覆盖默认值等closeButtonProps对象向关闭按钮附加属性如className、style合并覆盖、onClick扩展默认处理函数等toggleButtonProps对象向角落的切换按钮附加属性用法同上positiontop-left \| top-right \| bottom-left \| bottom-right默认bottom-left用于打开/关闭面板的 TanStack Router logo 按钮的位置shadowDOMTargetShadowRoot指定 Devtools 的 Shadow DOM 目标。默认情况下样式注入到主文档light DOM的head提供该选项后样式改注入该 Shadow DOM 内实现样式隔离containerElementstring \| any默认footer用于改变承载 Devtools 的容器元素类型如无障碍 a11y 目的。允许任何合法 JSX 内建元素字符串以containerElement为例核心渲染时用Dynamic component{Container}动态选择容器标签FloatingTanStackRouterDevtools.tsx#L237-L241默认即footer。Fixed 模式与 Embedded 嵌入模式TanStackRouterDevtoolsPanel如果想要完全自主地控制 Devtools 的位置与外观应使用TanStackRouterDevtoolsPanel它把面板当作一个普通组件嵌入你的应用之后你可以按任意方式做样式定制import { TanStackRouterDevtoolsPanel } from tanstack/react-router-devtools // Solid 则从 tanstack/solid-router-devtools 导入同名组件挂载到 Shadow DOM面板可以直接挂到预先创建的 Shadow DOM 目标上TanStackRouterDevtoolsPanel shadowDOMTarget{shadowContainer} router{router} /仓库内有一个真实可运行的示例examples/react/basic-devtools-panel其 src/main.tsx 展示了完整的 Shadow DOM 挂载流程——先给挂载节点attachShadow({ mode: open })再把 React 应用与 Devtools 面板渲染进 Shadow Root并将shadowDOMTarget传给面板组件。建议直接阅读该示例确认 Shadow DOM 场景下样式隔离的完整写法。Embedded 模式的完整写法import { TanStackRouterDevtoolsPanel } from tanstack/react-router-devtools function App() { return ( RouterProvider router{router} / TanStackRouterDevtoolsPanel router{router} style{styles} className{className} / / ) }Solid 版本与 React 相同仅把class作为类名属性TanStackRouterDevtoolsPanel router{router} style{styles} class{className} /Panel 选项说明选项类型说明routerRouter要连接的 router 实例不传时同样回落到路由上下文styleStyleObjectReact / Solid 各自的 style 对象内联样式用于按你的设计定制面板classNameReact/classSolidstring通过类名定制面板样式isOpenboolean指示面板当前是展开还是收起setIsOpen(isOpen: boolean) void切换面板开合状态handleDragStart(e: any) void处理面板的打开/关闭拖拽行为shadowDOMTargetShadowRoot将 Devtools 样式注入指定 Shadow DOM而不是主文档head以上选项与 packages/react-router-devtools/src/TanStackRouterDevtoolsPanel.tsx 中导出的TanStackRouterDevtoolsPanelOptions接口一一对应。与 Floating 不同Embedded 模式下开合状态由你通过isOpen/setIsOpen自行控制面板完全融入你的布局。源码架构框架包、Core 与遗留包理解 Devtools 的分层结构有助于正确引用与排查问题。从仓库源码结构看存在三层框架适配层packages/react-router-devtools 与 packages/solid-router-devtools。各自负责在自己的框架生命周期里React 的useEffect/ Solid 的onMountcreateEffect创建核心实例、同步 router 与 routerState并在一个占位div上调用mount()/unmount()。框架无关核心层packages/router-devtools-core/src/TanStackRouterDevtoolsCore.tsx。TanStackRouterDevtoolsCore类接收router与routerStatemount(el)时用Solid 的render函数把悬浮面板 imperatively 渲染进给定元素注意面板 UI 本身是用 Solid 编写的经lazy(() import(./FloatingTanStackRouterDevtools))懒加载unmount()调用其dispose释放渲染树重复挂载会直接抛出Devtools is already mounted错误。遗留转发层旧包名tanstack/router-devtools的 src/index.tsx 现在只有一段console.warn提示包已迁移到tanstack/react-router-devtools并将TanStackRouterDevtools/TanStackRouterDevtoolsPanel分别转发到...InProd变体——如果你在旧代码里见到tanstack/router-devtools的导入它实际上等价于新版包的生产常显版本。这一结构解释了若干工程行为懒加载Floating 面板组件在mount时才lazy引入减少首屏加载量TanStackRouterDevtoolsCore.tsx#L98-L105SSR 安全核心 UI 在客户端mount之后才渲染服务端不产出 Devtools DOM样式注入点可控shadowDOMTarget通过ShadowDomTargetContext传递给样式系统packages/router-devtools-core/src/context.ts默认走 light DOM 的head提供 Shadow Root 时则注入其中从而避免 Devtools 样式与业务 CSS 互相污染。适用前提与限制版本能力以当前仓库为准框架包与 core 以workspace:*互相依赖发布版号对齐如tanstack/react-router-devtools1.167.1生产环境默认不渲染 Devtools需要生产常显请使用TanStackRouterDevtoolsInProd/TanStackRouterDevtoolsPanelInProdFloating 模式的开合与高度记忆依赖浏览器localStorage在隐私模式或禁用存储的环境下会退化为不记忆useLocalStorage对读写异常做了静默捕获containerElement仅接受合法 JSX 内建元素字符串默认footer。小结TanStack Router Devtools 以独立包形式提供通过TanStackRouterDevtools悬浮、自动连接 router、状态记忆于 localStorage与TanStackRouterDevtoolsPanel嵌入/固定、完全自主控制样式与开合两条路径覆盖调试场景InProd变体解决生产环境可见性shadowDOMTarget解决样式隔离position/containerElement/*ButtonProps/panelProps则提供精细化定制空间。配合 examples/react/basic-devtools-panel 的 Shadow DOM 实战示例可以完整复现文档中的全部用法。【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
TanStack Router Devtools 完全指南：安装、悬浮/嵌入模式与源码级实现解析
TanStack Router Devtools 完全指南安装、悬浮/嵌入模式与源码级实现解析【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/router本文基于 TanStack Router 官方文档 docs/router/devtools.md系统讲解 Router Devtools 的安装、四种接入方式根路由挂载、手动传入 router、Floating 悬浮模式、Panel 固定/嵌入模式以及全部可配置项并结合packages/react-router-devtools、packages/solid-router-devtools与packages/router-devtools-core的源码说明生产环境裁剪、localStorage 状态记忆、Shadow DOM 样式隔离等底层机制帮助你在调试路由问题时有据可依。为什么需要 DevtoolsTanStack Router 内置了专属的开发调试工具Devtools它能可视化路由器内部的全部运行状态。当你开始 TanStack Router 的开发之旅时Devtools 是排障利器在遇到路由行为异常时它可以帮你省去大量的手动调试时间。Devtools 是一个独立的可选包与路由库本体解耦按需安装即可。安装Devtools 作为独立包分发需要单独安装React 项目tanstack/react-router-devtoolsSolid 项目tanstack/solid-router-devtools以仓库中的 packages/react-router-devtools/package.json 为例该包当前版本为 1.167.1其 peer 依赖要求tanstack/react-routerworkspace 版本对齐、react 18.0.0 || 19.0.0与react-dom 18.0.0 || 19.0.0Node 引擎要求 20.19。值得注意的是它的sideEffects: false声明——配合入口处的开发环境判断下文详述可以确保生产构建中被 tree-shaking 干净移除。从源码结构看两个框架包React / Solid只是薄薄的一层适配壳真正的 UI 与状态逻辑收敛在同构的 packages/router-devtools-core 中这一点后文架构章节会展开。导入 Devtools 组件// React import { TanStackRouterDevtools } from tanstack/react-router-devtools // Solid import { TanStackRouterDevtools } from tanstack/solid-router-devtoolsTanStackRouterDevtools是默认的悬浮式组件它会在页面上渲染一个占位的div随后由核心类把真正的悬浮面板挂载进去。生产环境行为与 InProd 变体默认导出的TanStackRouterDevtools在开发环境之外会自动渲染为null即生产构建中它什么都不显示。这一行为直接体现在包入口 packages/react-router-devtools/src/index.tsexport const TanStackRouterDevtools process.env.NODE_ENV ! development ? function () { return null } : Devtools.TanStackRouterDevtools export const TanStackRouterDevtoolsInProd Devtools.TanStackRouterDevtools可以看到TanStackRouterDevtoolsprocess.env.NODE_ENV ! development时被替换为返回null的占位函数TanStackRouterDevtoolsInProd始终指向真实组件用于你确实希望在NODE_ENV production的环境里保留 Devtools 的场景它拥有与默认导出完全相同的选项。TanStackRouterDevtoolsPanel与TanStackRouterDevtoolsPanelInProd采用同样的模式。在根路由中使用最简单的方式让 Devtools 工作的最简单方式是把它渲染在根路由root route中或任意其他路由内。这样 Devtools 会自动连接到当前 Context 中的 router 实例——源码中通过useRouter()hook 从路由上下文解析出活动 router见 packages/react-router-devtools/src/TanStackRouterDevtools.tsx。Reactimport { createRootRoute, Outlet } from tanstack/react-router import { TanStackRouterDevtools } from tanstack/react-router-devtools export const Route createRootRoute({ component: () ( Outlet / TanStackRouterDevtools / / ), })Solidimport { createRootRoute, Outlet } from tanstack/solid-router import { TanStackRouterDevtools } from tanstack/solid-router-devtools export const Route createRootRoute({ component: () ( Outlet / TanStackRouterDevtools / / ), })手动传入 Router 实例如果你不想把 Devtools 放在RouterProvider或根路由内部可以给 Devtools 传入routerprop其值就是传给Router/RouterProvider组件的同一个实例。这样 Devtools 可以放在页面的任何位置function App() { return ( RouterProvider router{router} / TanStackRouterDevtools router{router} / / ) }React 与 Solid 的写法一致。从源码看这一prop 优先、hook 兜底的逻辑非常直接packages/react-router-devtools/src/TanStackRouterDevtools.tsx#L62-L63const hookRouter useRouter({ warn: false }) const activeRouter propsRouter ?? hookRouter并且组件内部通过useEffectReact/createEffectSolid持续调用devtools.setRouter()与devtools.setRouterState()保证 router 实例或状态变化时 Devtools 同步更新packages/react-router-devtools/src/TanStackRouterDevtools.tsx#L84-L111。Floating 悬浮模式Floating 模式将 Devtools 挂载为应用中的一个固定浮动元素并在屏幕角落提供一个切换按钮用于展开/收起面板。面板的开关状态会写入 localStorage跨页面刷新自动记忆。官方建议将组件尽可能放到应用的高层位置——离页面根部越近效果越好。function App() { return ( RouterProvider router{router} / TanStackRouterDevtools initialIsOpen{false} / / ) }localStorage 记忆的实现状态跨刷新保留并非营销话术源码可以佐证。核心组件 packages/router-devtools-core/src/FloatingTanStackRouterDevtools.tsx 使用了两个 localStorage keyconst [isOpen, setIsOpen] useLocalStorage( tanstackRouterDevtoolsOpen, initialIsOpen, ) const [devtoolsHeight, setDevtoolsHeight] useLocalStoragenumber | null( tanstackRouterDevtoolsHeight, null, )也就是说面板开合状态tanstackRouterDevtoolsOpen与拖拽调整后的面板高度tanstackRouterDevtoolsHeight都会被持久化。对应的读写工具是 packages/router-devtools-core/src/useLocalStorage.ts它用 Solid 的createSignal封装了 JSON 序列化存取并在localStorage读写抛错时静默降级因此即便在禁用存储的浏览器环境下也不会报错。拖拽调整高度与自动收起同一文件中还实现了面板的拖拽逻辑FloatingTanStackRouterDevtools.tsx#L91-L125仅响应鼠标左键按下拖拽拖拽过程中实时写入高度当拖到高度小于 70px 时自动关闭面板相当于向上收起手势未拖拽过拖手柄时面板默认高度为 500pxdevtoolsHeight() ?? 500。Floating 模式完整选项以下选项在 TanStackRouterDevtoolsCore.tsx#L7-L50 的类型定义中有对应注释与文档描述一致选项类型 / 默认值说明routerRouter要连接的 router 实例。不传时自动从路由上下文useRouter()解析initialIsOpenboolean默认false设为true时 Devtools 默认展开。注意首次打开状态之后以 localStorage 中记忆的值为准panelProps对象向面板附加属性如className、style与默认样式合并并覆盖默认值等closeButtonProps对象向关闭按钮附加属性如className、style合并覆盖、onClick扩展默认处理函数等toggleButtonProps对象向角落的切换按钮附加属性用法同上positiontop-left \| top-right \| bottom-left \| bottom-right默认bottom-left用于打开/关闭面板的 TanStack Router logo 按钮的位置shadowDOMTargetShadowRoot指定 Devtools 的 Shadow DOM 目标。默认情况下样式注入到主文档light DOM的head提供该选项后样式改注入该 Shadow DOM 内实现样式隔离containerElementstring \| any默认footer用于改变承载 Devtools 的容器元素类型如无障碍 a11y 目的。允许任何合法 JSX 内建元素字符串以containerElement为例核心渲染时用Dynamic component{Container}动态选择容器标签FloatingTanStackRouterDevtools.tsx#L237-L241默认即footer。Fixed 模式与 Embedded 嵌入模式TanStackRouterDevtoolsPanel如果想要完全自主地控制 Devtools 的位置与外观应使用TanStackRouterDevtoolsPanel它把面板当作一个普通组件嵌入你的应用之后你可以按任意方式做样式定制import { TanStackRouterDevtoolsPanel } from tanstack/react-router-devtools // Solid 则从 tanstack/solid-router-devtools 导入同名组件挂载到 Shadow DOM面板可以直接挂到预先创建的 Shadow DOM 目标上TanStackRouterDevtoolsPanel shadowDOMTarget{shadowContainer} router{router} /仓库内有一个真实可运行的示例examples/react/basic-devtools-panel其 src/main.tsx 展示了完整的 Shadow DOM 挂载流程——先给挂载节点attachShadow({ mode: open })再把 React 应用与 Devtools 面板渲染进 Shadow Root并将shadowDOMTarget传给面板组件。建议直接阅读该示例确认 Shadow DOM 场景下样式隔离的完整写法。Embedded 模式的完整写法import { TanStackRouterDevtoolsPanel } from tanstack/react-router-devtools function App() { return ( RouterProvider router{router} / TanStackRouterDevtoolsPanel router{router} style{styles} className{className} / / ) }Solid 版本与 React 相同仅把class作为类名属性TanStackRouterDevtoolsPanel router{router} style{styles} class{className} /Panel 选项说明选项类型说明routerRouter要连接的 router 实例不传时同样回落到路由上下文styleStyleObjectReact / Solid 各自的 style 对象内联样式用于按你的设计定制面板classNameReact/classSolidstring通过类名定制面板样式isOpenboolean指示面板当前是展开还是收起setIsOpen(isOpen: boolean) void切换面板开合状态handleDragStart(e: any) void处理面板的打开/关闭拖拽行为shadowDOMTargetShadowRoot将 Devtools 样式注入指定 Shadow DOM而不是主文档head以上选项与 packages/react-router-devtools/src/TanStackRouterDevtoolsPanel.tsx 中导出的TanStackRouterDevtoolsPanelOptions接口一一对应。与 Floating 不同Embedded 模式下开合状态由你通过isOpen/setIsOpen自行控制面板完全融入你的布局。源码架构框架包、Core 与遗留包理解 Devtools 的分层结构有助于正确引用与排查问题。从仓库源码结构看存在三层框架适配层packages/react-router-devtools 与 packages/solid-router-devtools。各自负责在自己的框架生命周期里React 的useEffect/ Solid 的onMountcreateEffect创建核心实例、同步 router 与 routerState并在一个占位div上调用mount()/unmount()。框架无关核心层packages/router-devtools-core/src/TanStackRouterDevtoolsCore.tsx。TanStackRouterDevtoolsCore类接收router与routerStatemount(el)时用Solid 的render函数把悬浮面板 imperatively 渲染进给定元素注意面板 UI 本身是用 Solid 编写的经lazy(() import(./FloatingTanStackRouterDevtools))懒加载unmount()调用其dispose释放渲染树重复挂载会直接抛出Devtools is already mounted错误。遗留转发层旧包名tanstack/router-devtools的 src/index.tsx 现在只有一段console.warn提示包已迁移到tanstack/react-router-devtools并将TanStackRouterDevtools/TanStackRouterDevtoolsPanel分别转发到...InProd变体——如果你在旧代码里见到tanstack/router-devtools的导入它实际上等价于新版包的生产常显版本。这一结构解释了若干工程行为懒加载Floating 面板组件在mount时才lazy引入减少首屏加载量TanStackRouterDevtoolsCore.tsx#L98-L105SSR 安全核心 UI 在客户端mount之后才渲染服务端不产出 Devtools DOM样式注入点可控shadowDOMTarget通过ShadowDomTargetContext传递给样式系统packages/router-devtools-core/src/context.ts默认走 light DOM 的head提供 Shadow Root 时则注入其中从而避免 Devtools 样式与业务 CSS 互相污染。适用前提与限制版本能力以当前仓库为准框架包与 core 以workspace:*互相依赖发布版号对齐如tanstack/react-router-devtools1.167.1生产环境默认不渲染 Devtools需要生产常显请使用TanStackRouterDevtoolsInProd/TanStackRouterDevtoolsPanelInProdFloating 模式的开合与高度记忆依赖浏览器localStorage在隐私模式或禁用存储的环境下会退化为不记忆useLocalStorage对读写异常做了静默捕获containerElement仅接受合法 JSX 内建元素字符串默认footer。小结TanStack Router Devtools 以独立包形式提供通过TanStackRouterDevtools悬浮、自动连接 router、状态记忆于 localStorage与TanStackRouterDevtoolsPanel嵌入/固定、完全自主控制样式与开合两条路径覆盖调试场景InProd变体解决生产环境可见性shadowDOMTarget解决样式隔离position/containerElement/*ButtonProps/panelProps则提供精细化定制空间。配合 examples/react/basic-devtools-panel 的 Shadow DOM 实战示例可以完整复现文档中的全部用法。【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
