Route matching follows a consistent and predictable pattern. This guide will explain how route trees are matched.
When TanStack Router processes your route tree, all of your routes are automatically sorted to match the most specific routes first. This means that regardless of the order your route tree is defined, routes will always be sorted in this order:
Consider the following pseudo route tree:
Root - blog - $postId - / - new - / - * - about - about/us
After sorting, this route tree will become:
Root - / - about/us - about - blog - / - new - $postId - *
This final order represents the order in which routes will be matched based on specificity.
Using that route tree, let's follow the matching process for a few different URLs:
/blog
Root ❌ / ❌ about/us ❌ about ⏩ blog ✅ / - new - $postId - *
/blog/my-post
Root ❌ / ❌ about/us ❌ about ⏩ blog ❌ / ❌ new ✅ $postId - *
/
Root ✅ / - about/us - about - blog - / - new - $postId - *
/not-a-route
Root ❌ / ❌ about/us ❌ about ❌ blog - / - new - $postId ✅ *
During matching, pathless / layout routes are treated as if they are flat. If a route is not found in a pathless route's children, matching will continue out of the pathless route's children and on through the rest of the parent subtree like normal.
NotFoundRoute
s and MatchingIf you choose to configure a NotFoundRoute
for your router, it should be passed to the notFoundRoute
option and not as part of your routeTree
. This is because NotFoundRoute
s are not considered during matching and only render as a fallback when no other suitable match is found.
You can read more about NotFoundRoute
s in the Not Found Errors guide.
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.