Erstellen eines Routers

Wenn Sie bereit sind, Ihren Router zu verwenden, müssen Sie eine neue Router-Instanz erstellen. Die Router-Instanz ist das Kernstück von TanStack Router und ist verantwortlich für die Verwaltung des Routenbaums, das Abgleichen von Routen sowie die Koordination von Navigationen und Routenübergängen. Sie dient auch als Ort für die Konfiguration routerweiter Einstellungen.

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

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

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

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

Sie werden wahrscheinlich schnell feststellen, dass der Router-Konstruktor eine routeTree-Option erfordert. Dies ist der Routenbaum, den der Router zum Abgleichen von Routen und zum Rendern von Komponenten verwendet.

Unabhängig davon, ob Sie dateibasiertes Routing oder code-basiertes Routing verwendet haben, müssen Sie Ihren Routenbaum an die Funktion createRouter übergeben

Wenn Sie unser empfohlenes dateibasiertes Routing verwendet haben, ist es wahrscheinlich, dass Ihre generierte Routenbaumdatei am Standardort src/routeTree.gen.ts erstellt wurde. Wenn Sie einen benutzerdefinierten Speicherort verwendet haben, müssen Sie Ihren Routenbaum von diesem Speicherort importieren.

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

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

Wenn Sie code-basiertes Routing verwendet haben, haben Sie Ihren Routenbaum wahrscheinlich manuell mit der Methode addChildren der Root-Route erstellt

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

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

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

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

declare module '@tanstack/solid-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, um eine 404-Seite zu rendern oder zu einer Standardroute umzuleiten.

Wenn Sie dateibasiertes oder code-basiertes Routing verwenden, müssen Sie einen notFoundComponent-Schlüssel 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 Router-Konstruktor übergeben werden können. Eine vollständige Liste finden Sie in der API-Referenz.