框架
版本

路由匹配

路由匹配遵循一致且可预测的模式。本指南将解释路由树是如何匹配的。

当 TanStack Router 处理你的路由树时,所有路由都会自动排序,以优先匹配最具体的路由。这意味着无论你的路由树定义顺序如何,路由都将始终按以下顺序排序:

  • 索引路由
  • 静态路由(从最具体到最不具体)
  • 动态路由(从最长到最短)
  • Splat/通配符路由

考虑以下伪路由树:

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

排序后,此路由树将变为:

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

这个最终顺序代表了路由根据特异性进行匹配的顺序。

使用该路由树,让我们追踪几个不同 URL 的匹配过程:

  • /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
      ✅ *
    
我们的合作伙伴
Code Rabbit
Netlify
Neon
Clerk
Convex
Sentry
订阅 Bytes

您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。

Bytes

无垃圾邮件。您可以随时取消订阅。

订阅 Bytes

您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。

Bytes

无垃圾邮件。您可以随时取消订阅。