Devtools | TanStack Router Solid 文档

链接，拿上这把剑……我是说 Devtools！……来帮助你前行！

挥舞你的双手，欢呼吧，因为 TanStack Router 带有专门的 Devtools！🥳

当你开始你的 TanStack Router 之旅时，你会希望这些 Devtools 陪伴在你身边。它们可以帮助你可视化 TanStack Router 的所有内部工作原理，如果你陷入困境，它们很可能会为你节省数小时的调试时间！

安装

开发者工具是一个单独的包，你需要安装它

npm install @tanstack/solid-router-devtools

npm install @tanstack/solid-router-devtools

或

pnpm add @tanstack/solid-router-devtools

pnpm add @tanstack/solid-router-devtools

或

yarn add @tanstack/solid-router-devtools

yarn add @tanstack/solid-router-devtools

或

bun add @tanstack/solid-router-devtools

bun add @tanstack/solid-router-devtools

导入 Devtools

import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

在生产环境中使用 Devtools

如果 Devtools 被导入为 TanStackRouterDevtools，它将不会在生产环境中显示。如果你想在 process.env.NODE_ENV === 'production' 的环境中拥有 Devtools，请改用 TanStackRouterDevtoolsInProd，它具有所有相同的选项。

tsx

import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'

import { TanStackRouterDevtoolsInProd } from '@tanstack/solid-router-devtools'

在 RouterProvider 中使用

让 Devtools 工作最简单的方法是将其渲染在根路由（或任何其他路由）内部。这将自动将 Devtools 连接到 router 实例。

tsx

const rootRoute = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

const routeTree = rootRoute.addChildren([
  // ... other routes
])

const router = createRouter({
  routeTree,
})

function App() {
  return <RouterProvider router={router} />
}

const rootRoute = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})

const routeTree = rootRoute.addChildren([
  // ... other routes
])

const router = createRouter({
  routeTree,
})

function App() {
  return <RouterProvider router={router} />
}

手动传递 Router 实例

如果你不喜欢将 Devtools 渲染在 RouterProvider 内部，Devtools 的 router 属性接受你传递给 Router 组件的相同 router 实例。这使得可以将 Devtools 放置在页面的任何位置，而不仅仅是 provider 内部。

tsx

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <TanStackRouterDevtools router={router} />
    </>
  )
}

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <TanStackRouterDevtools router={router} />
    </>
  )
}

浮动模式

浮动模式将把开发者工具作为固定浮动元素挂载到您的应用中，并在屏幕角落提供一个切换按钮来显示和隐藏开发者工具。此切换状态将存储在 localStorage 中，并在重新加载时保留。

将以下代码尽可能高地放置在你的 Solid 应用中。它越靠近页面的根部，效果越好！

import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

function App() {
  return (
    <>
      <Router />
      <TanStackRouterDevtools initialIsOpen={false} />
    </>
  )
}

import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'

function App() {
  return (
    <>
      <Router />
      <TanStackRouterDevtools initialIsOpen={false} />
    </>
  )
}

Devtools 选项

router: Router
- 要连接的 router 实例。
initialIsOpen: 布尔值
- 将此设置为 true 如果你希望 devtools 默认打开。
panelProps: PropsObject
- 用于向面板添加 props。例如，你可以添加 class、style（合并和覆盖默认样式）等。
closeButtonProps: PropsObject
- 用于向关闭按钮添加 props。例如，你可以添加 class、style（合并和覆盖默认样式）、onClick（扩展默认处理程序）等。
toggleButtonProps: PropsObject
- 用于向切换按钮添加 props。例如，你可以添加 class、style（合并和覆盖默认样式）、onClick（扩展默认处理程序）等。
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
- 默认为 bottom-left。
- 用于打开和关闭 devtools 面板的 TanStack Router 徽标的位置。
shadowDOMTarget?: ShadowRoot
- 为 devtools 指定一个 Shadow DOM 目标。
- 默认情况下，devtools 样式应用于主文档（light DOM）的 <head> 标签。当提供 shadowDOMTarget 时，样式将被应用于该 Shadow DOM 中。
containerElement?: string | any
- 使用此项将 devtools 渲染在不同类型的容器元素中，以实现辅助功能。
- 允许任何符合有效内在 JSX 元素的字符串。
- 默认为 'footer'。

固定模式

要控制 devtools 的位置，请导入 TanStackRouterDevtoolsPanel。

import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

然后可以将其附加到提供的 shadow DOM 目标。

<TanStackRouterDevtoolsPanel
  shadowDOMTarget={shadowContainer}
  router={router}
/>

<TanStackRouterDevtoolsPanel
  shadowDOMTarget={shadowContainer}
  router={router}
/>

点击此处在 StackBlitz 中查看实时示例。

嵌入模式

嵌入模式会将 devtools 作为普通组件嵌入到你的应用程序中。之后你可以随意对其进行样式设置！

import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

function App() {
  return (
    <>
      <Router router={router} />
      <TanStackRouterDevtoolsPanel
        router={router}
        style={styles}
        class={class}
      />
    </>
  )
}

import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools'

function App() {
  return (
    <>
      <Router router={router} />
      <TanStackRouterDevtoolsPanel
        router={router}
        style={styles}
        class={class}
      />
    </>
  )
}

DevtoolsPanel 选项

router: Router
- 要连接的 router 实例。
style: StyleObject
- 标准的 Solid style 对象，用于通过内联样式为组件设置样式。
class: string
- 标准的 Solid class 属性，用于通过类名为组件设置样式。
isOpen?: boolean
- 一个布尔变量，指示面板是打开还是关闭。
setIsOpen?: (isOpen: boolean) => void
- 一个用于切换面板打开和关闭状态的函数。
handleDragStart?: (e: any) => void
- 处理 devtools 面板的打开和关闭。
shadowDOMTarget?: ShadowRoot
- 为 devtools 指定一个 Shadow DOM 目标。
- 默认情况下，devtools 样式应用于主文档（light DOM）的 <head> 标签。当提供 shadowDOMTarget 时，样式将被应用于该 Shadow DOM 中。

开发工具

安装