Erstellen eines Routers

Wenn Sie bereit sind, mit der Verwendung Ihres Routers zu beginnen, müssen Sie eine neue Instanz von Router erstellen. Die Router-Instanz ist das Kernstück von TanStack Router und ist für die Verwaltung des Route Trees, das Abgleichen von Routen sowie die Koordination von Navigationen und Routenübergängen verantwortlich. Sie dient auch als Ort für die Konfiguration von Router-weiten Einstellungen.

import { createRouter } from '@tanstack/react-router'

const router = createRouter({
  // ...
})

import { createRouter } from '@tanstack/react-router'

const router = createRouter({
  // ...
})

Sie werden wahrscheinlich schnell feststellen, dass der Konstruktor für Router eine Option routeTree erfordert. Dies ist der Route Tree, den der Router zum Abgleichen von Routen und Rendern von Komponenten verwenden wird.

Unabhängig davon, ob Sie dateibasierte Routen oder codebasierte Routen verwendet haben, müssen Sie Ihren Route Tree an die Funktion createRouter übergeben.

Wenn Sie unsere empfohlene dateibasierte Routenkonfiguration verwendet haben, dann wurde Ihre generierte Route Tree-Datei wahrscheinlich unter dem Standardpfad src/routeTree.gen.ts erstellt. Wenn Sie einen benutzerdefinierten Speicherort verwendet haben, müssen Sie Ihren Route Tree von dort importieren.

import { routeTree } from './routeTree.gen'

import { routeTree } from './routeTree.gen'

Wenn Sie codebasierte Routen verwendet haben, dann haben Sie Ihren Route Tree wahrscheinlich manuell mit der Methode addChildren der Root-Route erstellt.

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

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

TanStack Router bietet hervorragende Unterstützung für TypeScript, sogar für Dinge, die Sie nicht erwarten würden, wie reine Importe direkt aus der Bibliothek! Um dies zu ermöglichen, müssen Sie die Typen Ihres Routers mithilfe der Funktion Declaration Merging von TypeScript registrieren. Dies geschieht durch die Erweiterung der Schnittstelle Register auf @tanstack/react-router mit einer Eigenschaft router, die den Typ Ihrer Router-Instanz hat.

declare module '@tanstack/react-router' {
  interface Register {
    // This infers the type of our router and registers it across your entire project
    router: typeof router
  }
}

declare module '@tanstack/react-router' {
  interface Register {
    // This infers the type of our router and registers it across your entire project
    router: typeof router
  }
}

Nachdem Ihr Router registriert ist, erhalten Sie nun Typsicherheit in Ihrem gesamten Projekt für alles, was mit Routing zu tun hat.

Wie in früheren Anleitungen versprochen, behandeln wir nun die Option notFoundRoute. Diese Option wird verwendet, um eine Route zu konfigurieren, die gerendert wird, wenn keine andere passende Übereinstimmung gefunden wird. Dies ist nützlich zum Rendern einer 404-Seite oder zum Umleiten zu einer Standardroute.

Wenn Sie entweder dateibasierte oder codebasierte Routen verwenden, müssen Sie einen Schlüssel notFoundComponent zu createRootRoute hinzufügen.

export const Route = createRootRoute({
  component: () => (
    // ...
  ),
  notFoundComponent: () => <div>404 Not Found</div>,
});

export const Route = createRootRoute({
  component: () => (
    // ...
  ),
  notFoundComponent: () => <div>404 Not Found</div>,
});

Es gibt viele weitere Optionen, die an den Konstruktor von Router übergeben werden können. Eine vollständige Liste finden Sie in der API-Referenz.