How to keep search parameters for links in breadcrumbs?

[evgeniyworkbel]

sandbox with code

Steps to reproduce:

1. Click button open list
2. See list of entities. Change page in pagination under the table (e.g. click 2).
3. See that current page became 2. Click button open entity
4. Click Legals list in breadcrumbs to navigate to previous page
5. See that search params for previous page (Legals list) was resetted

Is there a way to keep search parameters for links in breadcrumbs?

[apoorva-01]

Breadcrumb links reset the params because a <Link> navigates with fresh search by default, it doesn't carry the current ones over. You have to ask for them explicitly:

<Link to="/legals" search={(prev) => prev}>Legals</Link>

search={(prev) => prev} just hands back whatever's already in the URL, so the page number survives the click. Newer versions also let you write search={true} as a shorthand for the same thing, but the function form works on every version so I'd reach for that first. And if you ever want to keep only some of them, spread and override: search={(prev) => ({ page: prev.page })}.

[evgeniyworkbel]

It doesn't work. It seems to me that the answer was written with AI. Did you understand the problem? Did you check the solution in sandbox?

[aymenhmaidiwastaken]

search={(prev) => prev} can't work here, and it's worth seeing why before reaching for a fix.

prev is the search of the route you're currently on. By the time you're looking at the breadcrumb you're on the entity page, and page was dropped from the URL back when you navigated there — so prev is {} and the function faithfully hands back nothing. The link is correct, there's just nothing left for it to carry.

I checked this on @tanstack/react-router 1.170.18 with a minimal two-route setup (/legals with a page search param, /legals/$id) driven through memory history, printing what each link actually resolves to:

on list           : /legals?page=2
click open entity : /legals/5          <-- page already gone here
on detail search  : {}
breadcrumb plain  : /legals
(prev)=>prev      : /legals

The loss happens on the way in, not on the way back.

The fix is retainSearchParams, but where you put it decides whether it does anything. Putting it on the /legals route — which is what I'd have guessed first — changes nothing, because a route's search middleware runs for navigations targeting that route, and the navigation that loses page is the one heading to /legals/$id:

=== middleware on the /legals list route ===
click open entity : /legals/5
breadcrumb plain  : /legals

It needs to sit on a route that's active for both navigations. The root route (or a shared parent layout route, if you'd rather scope it) works:

import { createRootRoute, retainSearchParams } from '@tanstack/react-router'

export const Route = createRootRoute({
  validateSearch: (search) => (
    search.page === undefined ? {} : { page: Number(search.page) }
  ),
  search: {
    middlewares: [retainSearchParams(['page'])],
  },
})

=== middleware on the root route ===
on list           : /legals?page=2
click open entity : /legals/5?page=2
on detail search  : { "page": 2 }
breadcrumb plain  : /legals?page=2
(prev)=>prev      : /legals?page=2

Note the third line — with the middleware in place, a plain <Link to="/legals">Legals list</Link> already returns to page 2. You don't need a search prop on the breadcrumb at all, which is nice because it means the breadcrumb component doesn't have to know which params any particular list route cares about.

One trade-off to be aware of rather than discover later: page now rides along in the entity URL too (/legals/5?page=2). That's inherent to how the middleware works — it keeps the param alive across the navigation, which necessarily means it's in the URL while you're on the detail page. In practice it's usually what you want, since sharing that URL brings the recipient back to the right page of the list. If you specifically need the detail URL clean, then retaining it in the URL isn't the right mechanism and you'd want to hold the list state outside the URL instead.

Fair warning on what I did and didn't check: I reproduced the mechanism in a minimal router rather than running your sandbox, so the shape of the fix is verified but the exact wiring for your route tree may differ — particularly if /legals and the entity route don't share the parent you put the middleware on. If you drop retainSearchParams on the root and it still resets, post your route tree and I'll look at where the two routes diverge.