Devtools

Link，拿起这把剑... 我是说 Devtools！... 来帮助你前进！

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

当你开始你的 TanStack Router 之旅时，你会希望这些 devtools 在你身边。它们可以可视化 TanStack Router 的所有内部工作原理，并且如果你发现自己陷入困境，它们可能会为你节省数小时的调试时间！

安装

devtools 是一个单独的包，你需要安装

npm install -D @tanstack/solid-router-devtools

npm install -D @tanstack/solid-router-devtools

或者

pnpm add -D @tanstack/solid-router-devtools

pnpm add -D @tanstack/solid-router-devtools

或者

yarn add -D @tanstack/solid-router-devtools

yarn add -D @tanstack/solid-router-devtools

或者

bun add -D @tanstack/solid-router-devtools

bun add -D @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 实例

如果在 `RouterProvider` 中渲染 devtools 不是你的菜，devtools 的 router prop 接受你传递给 `Router` 组件的相同 router 实例。这使得可以将 devtools 放置在页面上的任何位置，而不仅仅是在 provider 内部

tsx

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

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

浮动模式

浮动模式会将 devtools 作为固定的浮动元素安装在你的应用程序中，并在屏幕的角落提供一个切换按钮来显示和隐藏 devtools。此切换状态将存储并保存在 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 的位置，请导入 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 中查看此示例的实时演示。

选项

router: Router
- 要连接的 router 实例
initialIsOpen: Boolean
- 如果你想让 devtools 默认打开，请将此项设置为 `true`
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`
- TanStack Router 徽标的位置，用于打开和关闭 devtools 面板
shadowDOMTarget?: ShadowRoot
- 指定 devtools 的 Shadow DOM 目标。
- 默认情况下，devtool 样式应用于主文档（light DOM）的 `<head>` 标签。当提供 shadowDOMTarget 时，样式将应用于此 Shadow DOM 中。

嵌入模式

嵌入模式会将 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}
      />
    </>
  )
}

选项

使用这些选项来设置 devtools 的样式。

style: StyleObject
- 用于使用内联样式设置组件样式的标准 Solid style 对象
class: string
- 用于使用类设置组件样式的标准 Solid class 属性

安装