Skip to content

Incorrect path name type on parent routes #4804

@Dan503

Description

@Dan503

Which project does this relate to?

Router

Describe the bug

In the linked example the browser expects the path to be /about/ but TS thinks it should be /about

(Note: the slash vs no slash at the end of the string)

This causes a TS error if you do what the browser needs and it causes a JS error (or at least unexpected behavior) if you do what TS thinks is correct.

Your Example Website or App

https://stackblitz.com/edit/github-ytjdgxla?file=src%2Fcomponents%2FNav.tsx

Steps to Reproduce the Bug or Issue

  1. Create a blank tanstack start app
  2. Create a folder structure like src > routes > parentRoute
  3. In parentRoute store an index.tsx file and a childRoute.tsx file
  4. Create a RoutePath type using type RoutePath = RootRouteChildren[keyof RootRouteChildren]['fullPath']
  5. Create routePaths variable with type Array<RoutePath>
  6. Filter routeTree.children looking for matching fullPath properties with the route path items in the array

You will fins that the routeTree.children fullPath properties do not align with the RoutePath type.

Expected behavior

RootRouteChildren[keyof RootRouteChildren]['fullPath'] should match the values that the browser actually provides.

In this case, I think the browser is the one in the wrong since it has inconsistent use of the end slash (final destinations have no end slash, parent destinations do have an end slash). I think both parent and final destinations should have no end slash for consistency.

Screenshots or Videos

Image

Platform

  • Router / Start Version: 1.130.2
  • OS: Windows 11
  • Browser: Firefox
  • Browser Version: 141.0
  • Bundler: Vite
  • Bundler Version: 6.3.5

Additional context

No response

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