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 Routen unabhängig von der Reihenfolge, in der Ihr Routenbaum definiert ist, 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 der Sortierung wird dieser Routenbaum zu

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

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

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

Unter Verwendung dieses Routenbaums wollen wir den Abgleichprozess für einige verschiedene URLs verfolgen

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

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

• /blog/my-post
  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
    - *
  

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

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