Routenbäume

TanStack Router verwendet einen verschachtelten Routenbaum, um die URL mit dem korrekten Komponentenbaum zum Rendern abzugleichen.

Zum Erstellen eines Routenbaums unterstützt TanStack Router

• Dateibasiertes Routing
• Codebasierte Routen

Beide Methoden unterstützen exakt dieselben Kernfunktionen und Funktionalitäten, aber file-based Routing erfordert weniger Code für die gleichen oder bessere Ergebnisse. Aus diesem Grund ist file-based Routing die bevorzugte und empfohlene Methode zur Konfiguration von TanStack Router. Ein Großteil der Dokumentation ist aus der Perspektive von file-based Routing geschrieben.

Verschachteltes Routing ist ein mächtiges Konzept, das es Ihnen ermöglicht, eine URL zu verwenden, um einen verschachtelten Komponentenbaum zu rendern. Zum Beispiel, bei der URL /blog/posts/123, könnten Sie eine Routenhierarchie erstellen, die so aussieht

├── blog
│   ├── posts
│   │   ├── $postId

├── blog
│   ├── posts
│   │   ├── $postId

Und einen Komponentenbaum rendern, der so aussieht

<Blog>
  <Posts>
    <Post postId="123" />
  </Posts>
</Blog>

<Blog>
  <Posts>
    <Post postId="123" />
  </Posts>
</Blog>

Nehmen wir dieses Konzept und erweitern es auf eine größere Seitenstruktur, aber jetzt mit Dateinamen

/routes
├── __root.tsx
├── index.tsx
├── about.tsx
├── posts/
│   ├── index.tsx
│   ├── $postId.tsx
├── posts.$postId.edit.tsx
├── settings/
│   ├── profile.tsx
│   ├── notifications.tsx
├── _pathlessLayout/
│   ├── route-a.tsx
├── ├── route-b.tsx
├── files/
│   ├── $.tsx

/routes
├── __root.tsx
├── index.tsx
├── about.tsx
├── posts/
│   ├── index.tsx
│   ├── $postId.tsx
├── posts.$postId.edit.tsx
├── settings/
│   ├── profile.tsx
│   ├── notifications.tsx
├── _pathlessLayout/
│   ├── route-a.tsx
├── ├── route-b.tsx
├── files/
│   ├── $.tsx

Das Obige ist eine gültige Routenbaumkonfiguration, die mit TanStack Router verwendet werden kann! Es gibt viel Macht und Konventionen beim file-based Routing zu entdecken, also lass es uns ein wenig aufschlüsseln.

Routenbäume können auf verschiedene Arten konfiguriert werden

• Flache Routen
• Verzeichnisse
• Gemischte flache Routen und Verzeichnisse
• Virtuelle Dateirouten
• Code-basierte Routen

Bitte beachten Sie die vollständigen Dokumentationslinks oben für jeden Routenbaum-Typ, oder fahren Sie einfach mit dem nächsten Abschnitt fort, um mit file-based Routing zu beginnen.