Devtools

Nimm dieses Schwert... Ich meine Devtools!... um dir auf deinem Weg zu helfen!

Schwinge deine Hände in die Luft und rufe Hurra, denn TanStack Router kommt mit dedizierten Devtools! 🥳

Wenn du deine TanStack Router-Reise beginnst, wirst du diese Devtools an deiner Seite haben wollen. Sie helfen dir, alle inneren Abläufe von TanStack Router zu visualisieren und sparen dir wahrscheinlich Stunden beim Debuggen, falls du mal in Schwierigkeiten gerätst!

Die Devtools sind ein separates Paket, das Sie installieren müssen

npm install @tanstack/react-router-devtools

npm install @tanstack/react-router-devtools

oder

pnpm add @tanstack/react-router-devtools

pnpm add @tanstack/react-router-devtools

oder

yarn add @tanstack/react-router-devtools

yarn add @tanstack/react-router-devtools

oder

bun add @tanstack/react-router-devtools

bun add @tanstack/react-router-devtools

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

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

Die Devtools werden nicht in der Produktion angezeigt, wenn sie als TanStackRouterDevtools importiert werden. Wenn du Devtools in einer Umgebung mit process.env.NODE_ENV === 'production' haben möchtest, verwende stattdessen TanStackRouterDevtoolsInProd, das alle gleichen Optionen hat.

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

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

Der einfachste Weg, damit die Devtools funktionieren, ist, sie innerhalb deiner Root-Route (oder einer beliebigen anderen Route) zu rendern. Dadurch werden die Devtools automatisch mit der Router-Instanz verbunden.

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} />
}

Wenn das Rendern der Devtools innerhalb des RouterProvider nicht dein Ding ist, akzeptiert eine router-Prop für die Devtools dieselbe router-Instanz, die du an die Router-Komponente übergibst. Dadurch ist es möglich, die Devtools irgendwo auf der Seite zu platzieren, nicht nur innerhalb des Providers.

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

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

Der Floating Mode lädt die Devtools als festes, schwebendes Element in Ihrer App und bietet einen Schalter in der Ecke des Bildschirms, um die Devtools ein- und auszublenden. Dieser Schalterzustand wird in localStorage gespeichert und über Neuladungen hinweg beibehalten.

Platziere den folgenden Code so hoch wie möglich in deiner React-App. Je näher er am Root der Seite ist, desto besser wird er funktionieren!

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

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

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

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

• router: Router
  • Die Router-Instanz, mit der verbunden werden soll.
• initialIsOpen: Boolean
  • Setze dies auf true, wenn die Devtools standardmäßig geöffnet sein sollen.
• panelProps: PropsObject
  • Verwende dies, um dem Panel Props hinzuzufügen. Du kannst zum Beispiel className, style (zusammenführen und überschreiben des Standardstils) usw. hinzufügen.
• closeButtonProps: PropsObject
  • Verwende dies, um dem Schließen-Button Props hinzuzufügen. Du kannst zum Beispiel className, style (zusammenführen und überschreiben des Standardstils), onClick (Standardhandler erweitern) usw. hinzufügen.
• toggleButtonProps: PropsObject
  • Verwende dies, um dem Toggle-Button Props hinzuzufügen. Du kannst zum Beispiel className, style (zusammenführen und überschreiben des Standardstils), onClick (Standardhandler erweitern) usw. hinzufügen.
• position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
  • Standard ist bottom-left.
  • Die Position des TanStack Router Logos, um das Devtools-Panel zu öffnen und zu schließen.
• shadowDOMTarget?: ShadowRoot
  • Gibt ein Shadow DOM-Ziel für die Devtools an.
  • Standardmäßig werden Devtool-Styles auf das <head>-Tag des Hauptdokuments (Light DOM) angewendet. Wenn ein shadowDOMTarget angegeben wird, werden die Styles stattdessen innerhalb dieses Shadow DOM angewendet.
• containerElement?: string | any
  • Verwende dies, um die Devtools aus Gründen der Barrierefreiheit in einem anderen Containerelementtyp zu rendern.
  • Jeder String, der einem gültigen intrinsischen JSX-Element entspricht, ist erlaubt.
  • Standard ist 'footer'.

Um die Position der Devtools zu steuern, importiere das TanStackRouterDevtoolsPanel

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

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

Es kann dann an das bereitgestellte Shadow DOM-Ziel angehängt werden

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

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

Klicke hier, um ein Live-Beispiel davon in StackBlitz zu sehen.

Embedded Mode bettet die Devtools als normale Komponente in deine Anwendung ein. Du kannst sie danach beliebig stylen!

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

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

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

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

• router: Router
  • Die Router-Instanz, mit der verbunden werden soll.
• style: StyleObject
  • Das Standard-React-Style-Objekt, das verwendet wird, um eine Komponente mit Inline-Styles zu gestalten.
• className: string
  • Die Standard-React-Klassenname-Eigenschaft, die verwendet wird, um eine Komponente mit Klassen zu gestalten.
• isOpen?: boolean
  • Eine boolesche Variable, die angibt, ob das Panel geöffnet oder geschlossen ist.
• setIsOpen?: (isOpen: boolean) => void
  • Eine Funktion, die den Öffnungs- und Schließzustand des Panels umschaltet.
• handleDragStart?: (e: any) => void
  • Verarbeitet das Öffnen und Schließen des Devtools-Panels.
• shadowDOMTarget?: ShadowRoot
  • Gibt ein Shadow DOM-Ziel für die Devtools an.
  • Standardmäßig werden Devtool-Styles auf das <head>-Tag des Hauptdokuments (Light DOM) angewendet. Wenn ein shadowDOMTarget angegeben wird, werden die Styles stattdessen innerhalb dieses Shadow DOM angewendet.