router
router copied to clipboard
Navigation without to param does not work since 1.30.1
Describe the bug
I updated to 1.30.1, because fix for bug with path params was introduced and it works fine. But, it broke other thing. Before 1.30.1 I was able to make link, or use navigate(), or throw redirect() without specifing to. I did it, because I only need to change path param(for example language code in path param), but I want to leave user on the same page and it worked fine. Now it ignores new path params and generates href with old params in this case.
Your Example Website or App
everywhere
Steps to Reproduce the Bug or Issue
- Create <Link> component and specify only from and params
- Press/hover on it. Nothing happens
Expected behavior
I expected to generate href with new params, but previous path
Screenshots or Videos
No response
Platform
- OS: all
- Browser: all
- Version: 1.30.1
Additional context
No response
I found workaround for this
You can use this hook
import { useMatches, useRouter } from "@tanstack/react-router";
export default function useCurrentRouteFullPath() {
const router = useRouter();
const routeId = useMatches({
select: matches => {
if (matches.length === 0) {
throw Error("No matcher found");
}
return matches[matches.length - 1].routeId;
},
});
return router.routesById[routeId].fullPath;
}
It will return current "to" and you can put it into navigate(), <Link/>. Probably it will cause typescript errors with "params" and "search", but it works
I think it would be great to do it default behaviour, when to is not specified, like it was before 1.30.1
was this regression introduced with 1.30.1? or another earlier version?
I am sorry for late answer, yes, it was introduced with 1.30.1. It worked with 1.29.2, but a lot of other things worked bad. I have just updated to latest version 1.31.1 and the issue persists
I think this is the cause of https://github.com/TanStack/tanstack.com/issues/218 over on the docs site
I have a reproduction StackBlitz of what's going on here:
https://stackblitz.com/edit/tanstack-router-gvq58b
Clicking the post links will work fine, but the select will call navigate({params: ...}) and it won't do anything. (it's controlled by the postId param)
@maksymskuibida could you try 1.31.0? From my perspective it was working fine on that version but was broke (again?) in the next commit at https://github.com/TanStack/router/commit/91bf1bc42a73da9da59f8ff16eb26a9840893136
I did some debugging and it seems under these circumstances, interpolatePathname at line 968 at react-router/src/router.ts is not being passed a path with the proper params (e.g. pathname is /posts/3, params is {postId: 4}, when it should be /posts/$postId, {postId: 4}.
If I have time I'll try and make a PR with a test.
@DogPawHat I will try 1.31.0 and let you know
@DogPawHat I have just tested. It really works on 1.31.0. This version have issue with preload="intent". When I hover on links it changes path params in internal router state.
So, I went back to latest version. But, also I found, that in latest version redirects work without to param. They did not work before, but work now.
I have been using to: router.routesById[router.state.matches[router.state.matches.length - 1].routeId].fullPath to fix this issue. But now I can remove this, because throw redirect(...) now works without to param
Well my stackblitz and the tanstack docs site still have this issue I think, gonna throw up the test pr now.