Skip to content

Generated type FileRoutesByFullPath doesn't match runtime type #3780

Open
@am-a

Description

@am-a

Which project does this relate to?

Router

Describe the bug

Problem

router.routesByPath is defined as RoutesByPath<TRouteTree> which includes trailing '/' for index routes. However this does not match the runtime type which removes trailing slashes.

Description

Given the following structure:

foo/
└── bar/
    ├── index.tsx
    ├── route.tsx
    └── __root.tsx

generates:

export interface FileRoutesByFullPath {
  '/bar': typeof fooBarRouteRouteWithChildren
  '/bar/': typeof fooBarIndexRoute
}

but in:

https://github.com/TanStack/router/blob/4568b38b69b5a649484a8168f4765de97c10f193/packages/react-router/src/router.ts

       if (!childRoute.isRoot && childRoute.path) {
          const trimmedFullPath = trimPathRight(childRoute.fullPath)
          if (
            !(this.routesByPath as any)[trimmedFullPath] ||
            childRoute.fullPath.endsWith('/')
          ) {
            ;(this.routesByPath as any)[trimmedFullPath] = childRoute
          }
        }

we can see that the trimmed path is the key that is used for the object at runtime.

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-nychtyxe

Steps to Reproduce the Bug or Issue

  1. Create a router project with an index route matching above structure
  2. Observe that Types does not match runtime types

Expected behavior

The typing for the property should match the runtime type i.e. without slashes

Screenshots or Videos

Image

Platform

All

Additional context

The included link goes to a StackBlitz where you can quickly see the problem in action by comparing the interface and the actual runtime types.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions