Layout routes cause optional params to fail to match #5912

Activity

1. Sheraff

   self-assigned this

   on Nov 20, 2025
2. Sheraff commented on Nov 20, 2025

   

   Sheraff

   on Nov 20, 2025

   Last edited by Sheraff

   Collaborator

   More actions

   Trying to write my thoughts down so I can debug this later:

   If we go to /posts should we match /posts/{-$category} or /posts?

   • current behavior is /posts, so just the layout with an empty outlet
   • if route.tsx is not there, then /posts will match /posts/{-$category}

   I feel like this issue is kinda correct. If I were to try and formulate a rule it would be

   • if /posts is an exact match and is an index then favor that over the optional child
   • if /posts does not exist or is a layout route then favor the optional child

   it is implementable but

   • our possibilities of early return are even smaller
   • some of the unit tests fail (but these are edge-cases that are hard to have a strong opinion on)

   Both of these would now fail, and match the other route instead

   it('/optional/static/static vs /static/static', () => {
     const tree = makeTree(['/{-$other}/posts/new', '/posts/new'])
     expect(findRouteMatch('/posts/new', tree)?.route.id).toBe('/posts/new')
   })
   it('edge-case: ???', () => {
     // This test comes from the previous processRouteTree tests.
     // > This demonstrates that `/foo/{-$p}.tsx` will be matched, not `/foo/{-$p}/{-$x}.tsx`
     // > This route has 1 optional parameter, making it more specific than the route with 2
     const tree = makeTree(['/foo/{-$p}.tsx', '/foo/{-$p}/{-$x}.tsx'])
     expect(findRouteMatch('/foo', tree)?.route.id).toBe('/foo/{-$p}.tsx')
   })

   Either way could be argued, I'm not sure what is the correct match here. Would be interesting to see what other routers do.

   ---

   To implement this, change

   • perfect match early return condition

     // perfect match, no need to continue
     if (statics === partsLength && node.isIndex) return bestMatch

   • stack frame comparison function

     function isFrameMoreSpecific(
       // the stack frame previously saved as "best match"
       prev: MatchStackFrame<any> | null,
       // the candidate stack frame
       next: MatchStackFrame<any>,
     ): boolean {
       if (!prev) return true
       return (
         next.statics > prev.statics ||
         (next.statics === prev.statics &&
           (next.dynamics > prev.dynamics ||
             (next.dynamics === prev.dynamics &&
               ((next.node.isIndex && !prev.node.isIndex) ||
                 next.depth > prev.depth))))
       )
     }
3. Sheraff

   closed this as completedin #5933on Nov 21, 2025