Routenbäume

TanStack Router verwendet einen verschachtelten Routenbaum, um die URL mit dem richtigen Komponentenbaum abzugleichen, der gerendert werden soll.

Zum Erstellen eines Routenbaums unterstützt TanStack Router

• Dateibasiertes Routing
• Codebasierte Routen

Beide Methoden unterstützen exakt dieselben Kernfunktionen und Funktionalitäten, aber Dateibasiertes Routing erfordert weniger Code für die gleichen oder bessere Ergebnisse. Aus diesem Grund ist dateibasiertes Routing die bevorzugte und empfohlene Methode zur Konfiguration von TanStack Router. Der Großteil der Dokumentation ist aus der Perspektive des dateibasierten Routings verfasst.

Verschachteltes Routing ist ein mächtiges Konzept, das es Ihnen ermöglicht, eine URL zu verwenden, um einen verschachtelten Komponentenbaum zu rendern. Gegeben sei beispielsweise die URL /blog/posts/123, könnten Sie eine Routenhierarchie erstellen, die wie folgt aussieht:

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

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

Und einen Komponentenbaum rendern, der wie folgt 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! Dateibasiertes Routing bietet viel Leistung und Konventionen, die es zu erkunden gilt. Lassen Sie uns das genauer 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 schauen Sie sich die vollständigen Dokumentationslinks oben für jede Art von Routenbaum an oder fahren Sie einfach mit dem nächsten Abschnitt fort, um mit dem dateibasierten Routing zu beginnen.