TanStack / router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
https://tanstack.com/router
MIT License
7.27k stars 495 forks source link

`route.tsx` changes whether trailing slashes are required in links to `index.tsx` #1596

Closed twiddler closed 2 weeks ago

twiddler commented 2 weeks ago

Describe the bug

With file-based routing, foo/route.tsx changes whether links to foo/index.tsx must be /foo/ or /foo:

  1. If foo/route.tsx does not exist, foo/index.tsx can be linked to only with /foo/, not /foo.
  2. If foo/route.tsx does exist, foo/index.tsx can be linked to only with /foo, not /foo/.

Your Example Website or App

https://stackblitz.com/edit/github-fzqvge?file=src%2Froutes%2F__root.tsx

Steps to Reproduce the Bug or Issue

  1. Use file-based routing.
  2. In a directory that has an index.tsx, create a route.tsx.

Expected behavior

In the given StackBlitz example, I expected either

i.e. I did not expect the presence of route.tsx to change the links to index.tsx.

Screenshots or Videos

image

Platform

StackBlitz

Additional context

No response

TkDodo commented 2 weeks ago

fyi, I have a similar setup but we use trailingSlash: 'always' and that seems to work better for us:

https://stackblitz.com/edit/github-fzqvge-yfunzp?file=src%2Fmain.tsx,src%2Froutes%2F__root.tsx

basically, without an index.tsx route, you can't navigate there at all. That makes sense to me because route.tsx is just a layout that renders something + an outlet. Once you have an index.tsx page, even if it renders () => null, you have a concrete route to navigate to.

There seems to be an additional bug though with the types when there is just an index.tsx but no route.tsx. The types seem to be a bit off, because I get these as possible to targets:

"/nested-with-route/" | "/flat-with-route/" | "/" | "./" | "../" | "/nested-no-route//" | "/flat-no-route//" | undefined'. Did you mean '"/flat-no-route//"'

note that the -no-route routes have two slashes at the end 😅 .

@chorobin this might be something to look at

chorobin commented 2 weeks ago

I think it's a bug in the generator. We moved the full path logic to there instead of TS doing it. And before I think TS was removing trailing slashes for fullPath and then we added it back depending on the setting. Now the generator produces a trailing slash and we add another trailing slash!

twiddler commented 2 weeks ago

We did see some new type errors after upgrading to v1.32.2 which led me to this experiment, so quite possibly yes. (I did not test this with pre-v1.32.2.)

chorobin commented 2 weeks ago

Yep. I know where to fix it. Will get a pr up. Not all index routes should have a trailing slash I guess. Only those that uniquely identified by one