Routenabgleich

Der Routenabgleich folgt einem konsistenten und vorhersagbaren Muster. Diese Anleitung erklärt, wie Routenbäume abgeglichen werden.

Wenn TanStack Router Ihren Routenbaum verarbeitet, werden alle Ihre Routen automatisch sortiert, um zuerst die spezifischsten Routen abzugleichen. Das bedeutet, dass unabhängig von der Reihenfolge, in der Ihr Routenbaum definiert ist, die Routen immer in dieser Reihenfolge sortiert werden:

• Index-Route
• Statische Routen (von der spezifischsten zur am wenigsten spezifischen)
• Dynamische Routen (von der längsten zur kürzesten)
• Splat-/Wildcard-Routen

Betrachten Sie den folgenden Pseudo-Routenbaum

Root
  - blog
    - $postId
    - /
    - new
  - /
  - *
  - about
  - about/us

Root
  - blog
    - $postId
    - /
    - new
  - /
  - *
  - about
  - about/us

Nach dem Sortieren wird dieser Routenbaum zu

Root
  - /
  - about/us
  - about
  - blog
    - /
    - new
    - $postId
  - *

Root
  - /
  - about/us
  - about
  - blog
    - /
    - new
    - $postId
  - *

Diese endgültige Reihenfolge stellt die Reihenfolge dar, in der Routen basierend auf ihrer Spezifität abgeglichen werden.

Lassen Sie uns anhand dieses Routenbaums den Abgleichprozess für einige verschiedene URLs verfolgen

• /blog
  Root
    ❌ /
    ❌ about/us
    ❌ about
    ⏩ blog
      ✅ /
      - new
      - $postId
    - *
  

  Root
    ❌ /
    ❌ about/us
    ❌ about
    ⏩ blog
      ✅ /
      - new
      - $postId
    - *
  

• /blog/mein-beitrag
  Root
    ❌ /
    ❌ about/us
    ❌ about
    ⏩ blog
      ❌ /
      ❌ new
      ✅ $postId
    - *
  

  Root
    ❌ /
    ❌ about/us
    ❌ about
    ⏩ blog
      ❌ /
      ❌ new
      ✅ $postId
    - *
  

• /
  Root
    ✅ /
    - about/us
    - about
    - blog
      - /
      - new
      - $postId
    - *
  

  Root
    ✅ /
    - about/us
    - about
    - blog
      - /
      - new
      - $postId
    - *
  

• /keine-route
  Root
    ❌ /
    ❌ about/us
    ❌ about
    ❌ blog
      - /
      - new
      - $postId
    ✅ *
  

  Root
    ❌ /
    ❌ about/us
    ❌ about
    ❌ blog
      - /
      - new
      - $postId
    ✅ *