How to return to a given URL without a full page reload?

[aconrad]

I'm trying to return to the previously visited page without a full page reload.

I have a page, let's call it "TargetPage", that accepts a returnUrl search param that can be navigated to from various pages (e.g. "OtherPage", "SomePage", etc.). From "OtherPage", I pass location.href as ?returnUrl=... then I can do:

// TargetPage
const { returnUrl } = Route.useSearch()

// ...
<Link to={returnUrl}>Back</Link>

... and I return where I came from when the user clicks the link. But I'm observing that it's doing a traditional full-page reload instead of an SPA navigation. My guess is that it's happening because TanStack Router might not see the to value as an app URL (e.g. Route.id) but rather an "rendered"/"opaque" URL (plain string) as if it was an external site.

What is the best practice to return to a page without doing a full-page reload? Should I manually encode all the Link props into the URL search param instead of providing a fully rendered URL? Thoughts?

[schiller-manuel]

My guess is that it's happening because TanStack Router might not see the to value as an app URL

yes, this is correct, see also

router/packages/react-router/src/link.tsx

Line 591 in 1346301

new URL(`${to}`)

if you pass a full URL into <Link>, router will treat it as an external URL and a full page reload will happen.

Should I manually encode all the Link props into the URL search param instead of providing a fully rendered URL?

could be a solution, yes