How to retain the search param's value but remove it from URL

[xsjcTony]

Let's say I have a route /foo, which needs to take a customer-key from the search parameters.
It will look like this
https://example.com/foo?customer-key=xxxxx

However, since that's sensitive info, at least I don't want it to show up in the URL just like that. So I want to remove it after reading the data and save it somewhere (e.g. session storage).

Is there any suggested way to do this? Once I remove it using navigate(), the value from useSearch() also becomes null.

[master8848]

In my opnion,On this how would refreshing page work based on that you can use loaderDeps lifecycle method to return any required data while removing sensitive data form URL and dual loading form local storage, session storage, cookies or index db.

[schiller-manuel]

have a look at https://tanstack.com/router/latest/docs/framework/react/api/router/stripSearchParamsFunction

[xsjcTony]

I've tried this, but that doesn't fit my requirement.

• The customer-key search param is NOT optional, it's required for me to fetch corresponding customer data in order to make the route work. If I use this plugin, the value of customer-key will be undefined straight away.
• Although I want to remove it from the URL, but I still want to retain the value.
• When using navigate() to remove it, I'll encounter a type error because it's supposed to be a string instead of void 0. (navigate({ search: { 'customer-key': void 0 } }))

[xsjcTony]

My only solution right now is:

1. Make the customer-key search param .optional()
2. Fire a useEffect on mount, save it into session storage and remove it via navigate(). There won't be any TS error in this case because it's now optional, and refresh still works because I can read it from session storage in useEffect
3. Done.

I don't think this is the ideal way but I can't think of another way. Please let me know if there's a better way to do it @schiller-manuel 💚

[xsjcTony]

Or another way I've found:

1. Make a custom search middleware, save it into session storage straight away, and remove it from the middleware
2. Read it from session storage in the component straight away instead of relying on useSearch()

This seems better, but either way, I don't think I can take the advantage of data loader... idk.

And to be said, seems the return value of the middleware is not type-safe?
Even it returns TSearchSchema, but seems I can return anything. (specifically, more KV pairs are allowed)