genetic-orange

Has <Link to="." ... /> changed recently? I used to be able to update search this way.

The behavior now routes me to the root "/" layout. I'm able to work around this by grabbing router state by way of useRouterState and dump its respective state's pathname in. Here's an example of the workaround — <MenuItem /> is a lightweight wrapper around <Link/>.
The following used to work with to="."

            <MenuItem
              color="negative"
              iconColor="negative"
              iconName="Logout"
              onClick={handleClosePopover}
              search={(prev) => ({ ...prev, flow: { name: 'signout' } })}
              to={state.location.pathname as LinkProps['to']}
            >
              Sign Out
            </MenuItem>

            <MenuItem
              color="negative"
              iconColor="negative"
              iconName="Logout"
              onClick={handleClosePopover}
              search={(prev) => ({ ...prev, flow: { name: 'signout' } })}
              to={state.location.pathname as LinkProps['to']}
            >
              Sign Out
            </MenuItem>

5 Replies

firm-tan•9mo ago

what was the last version that worked with? we did not change it recently

genetic-orangeOP•9mo ago

1s, I'll find the version that where it broke..., I think it's been broken in my app for a while 😅 Narrowing things down, pinned my version to 1.81.9 and "to='.'" behaviour works as expected. Pinning router packages to 1.81.10, I start seeing the breakage. Still bisecting versions to isolate what package + version things stop working ... Ah, may be due to https://github.com/TanStack/router/compare/v1.81.9...v1.81.10#diff-5fd7a0f05758a78cf8b73c09e4d71d21af63fe3d9b312b0ee75b04041ef078e7R654-R663 — I definitely don't specify a from anywhere on my Link components. It feels like a combination of pathless route (e.g. _layout from docs https://tanstack.com/router/v1/docs/framework/react/guide/file-based-routing#pathless-routes) and <Link to=".">. When you don't specify from, it falls back to useMatch({ strict: false, select: (s) => s.pathname }) or the root path. This lines up with the blurb https://tanstack.com/router/latest/docs/framework/react/guide/navigation#everything-is-relative ---> "If a from route ID isn't provided the router will assume you are navigating from the root / route". I may wrap Link in another component, check if to === '.', and shove the current pathname in as from if that's not passed — feels more natural than using the root path in this case.

firm-tan•9mo ago

can you provide a minimal complete example by forking one of the existing stackblitz examples?

genetic-orangeOP•9mo ago

I'll take that on 👍 , I ended up passing from={undefined} in my particular case to revert to previous behaviour whenever passing to=".".

genetic-orangeOP•9mo ago

https://github.com/TanStack/router/pull/3106. If anything, may help with triaging issues for others... I think ya'll have the correct behavior, just caught me off guard. I'm wondering if there's a less hacky/more semantic way to accomplish what I need. Screenshots to help illustrate how I got into this mess :D. The colored dotted lines show my respective nested <Outlet> components. You can see I initiate a navigation change with <Link to="." seach={{ modalId: 'sign-out'confirmation' }}/> inside the user dropdown that's inside my _layout.

Gaming

Programming

Has <Link to="." ... /> changed recently? I used to be able to update search this way.

Did you find this page helpful?