How to use navigate but keep prev search params?

[ruiaraujo012]

Hello,
Let's assume the following routes:

• /users
• /users/$userId
• /notifications

I need to implement a back button, so the user could navigate back in the app. To go from /users/1 I could use a Link or navigate with to='..', and it works, but, if I have search params, those will be lost in the process, for example:

1. On /users?page=5&size=10 I select one user and navigate to /users/273
2. Clicking back, will jump to /users?page=0&size=10 (search params reset to default ones)

I could use history.back(), although, if I came from /notifications I don't want to go back there, but to /users?page=0&size=10

How can I solve this? Is there any way of knowing the from route so I could use history.back() or to='..' conditionally?

Here is the example https://stackblitz.com/edit/tanstack-router-8jslocus?file=src%2Froutes%2Fusers%2F%24userId.tsx

Steps:

1. Navigate to Users
2. Click Next a couple of times (like page=3)
3. Click Navigate example to some user
4. Click Back (prev search was lost, I could use history.back(), but...)
5. Navigate to Notifications
6. Click here
7. Click Back (this back should go to users with the default search)

So I wanted to conditionally use history.back() or navigate to='..' based on the last route, if users, go back to preserve search, otherwise, use the to option.

[xsjcTony]

Not sure if this is going to help you:
https://tanstack.com/router/latest/docs/framework/react/guide/search-params#transforming-search-with-search-middlewares
https://tanstack.com/router/latest/docs/framework/react/api/router/retainSearchParamsFunction

[ruiaraujo012]

Thanks for your answer @xsjcTony, but unfortunately, it doesn't solve my problem :/

[schiller-manuel]

so the user could navigate back in the app

what does that mean? can you please provide a complete minimal example by forking one of the existing stackblitz examples and provide exact steps that a user would perform?

[ruiaraujo012]

Hello @schiller-manuel, here is the example https://stackblitz.com/edit/tanstack-router-8jslocus?file=src%2Froutes%2Fusers%2F%24userId.tsx

Steps:

1. Navigate to Users
2. Click Next a couple of times (like page=3)
3. Click Navigate example to some user
4. Click Back (prev search was lost, I could use history.back(), but...)
5. Navigate to Notifications
6. Click here
7. Click Back (this back should go to users with the default search)

So I wanted to conditionally use history.back() or navigate to='..' based on the last route, if users, go back to preserve search, otherwise, use the to option.

[ruiaraujo012]

Hi, any suggestion?

[schiller-manuel]

essentially you would need to look at the history for which there is no API provided by the browser. Our idea is to add a plugin to history that records the history stack in sessionstorage. if you want to help out with that, let's discuss in discord.

[ruiaraujo012]

Oh nice, that's a good idea. I'm a bit busy, but I'd like to be updated about that.