router icon indicating copy to clipboard operation
router copied to clipboard

Navigation without to param does not work since 1.30.1

Open maksymskuibida opened this issue 1 year ago • 3 comments

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

  1. Create <Link> component and specify only from and params
  2. 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

maksymskuibida avatar Apr 26 '24 11:04 maksymskuibida

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

maksymskuibida avatar Apr 26 '24 12:04 maksymskuibida

was this regression introduced with 1.30.1? or another earlier version?

schiller-manuel avatar Apr 27 '24 09:04 schiller-manuel

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

maksymskuibida avatar Apr 29 '24 11:04 maksymskuibida

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

DogPawHat avatar May 02 '24 10:05 DogPawHat

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 avatar May 02 '24 10:05 DogPawHat

@DogPawHat I will try 1.31.0 and let you know

maksymskuibida avatar May 02 '24 10:05 maksymskuibida

@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

maksymskuibida avatar May 02 '24 11:05 maksymskuibida

Well my stackblitz and the tanstack docs site still have this issue I think, gonna throw up the test pr now.

DogPawHat avatar May 02 '24 11:05 DogPawHat