Router.push/replace does not work while setting search parameters
Unanswered
Orinoco Crocodile posted this in #help-forum
Orinoco CrocodileOP
I am building an app to track monthly expenditures using Next.js. Cache components and the react compiler are enabled, and the app is hosted on Vercel.
The issue that I am facing is how setting the route (with updated search parameters) using router.push() or router.replace() does not seem to work in production, but works in development, when using my custom hook useSearchParamState. Moreover, I do not see what is causing this because there are no error logs.
Relevant files to check:
lib/hooks.ts - useSearchParamState
components/expense-list/expense-list-filters.tsx
components/expense-list/expense-list.server.tsx
Here is the link to the GitHub: https://github.com/kkapoor15904/expense-app
Any help regarding this is appreciated!
The issue that I am facing is how setting the route (with updated search parameters) using router.push() or router.replace() does not seem to work in production, but works in development, when using my custom hook useSearchParamState. Moreover, I do not see what is causing this because there are no error logs.
Relevant files to check:
lib/hooks.ts - useSearchParamState
components/expense-list/expense-list-filters.tsx
components/expense-list/expense-list.server.tsx
Here is the link to the GitHub: https://github.com/kkapoor15904/expense-app
Any help regarding this is appreciated!
30 Replies
does the problem still happen if you dont use a transition? @Orinoco Crocodile
Orinoco CrocodileOP
Yes
Could it be something to do with cache?
not sure let me look at the function you use to update them
one sec
@Orinoco Crocodile So first look I thought it was funny that you were using uri encode becuase from my experince I've only had to use decode
then I asked about about it(We can always checkk the docs) and it says you are manually calling encodeURIComponent(valueToBeSet). However, the URLSearchParams.toString() method and the Next.js router automatically encode parameters for you.
can we try
if (valueToBeSet) wsp.set(key, valueToBeSet);Orinoco CrocodileOP
Yes I actually fixed that part, I didn’t realise it did that under the hood
Issue is, the problem still persists
what about here
if (!sp.has('locale')) {
sp.set('locale', encodeURIComponent(locale));@Orinoco Crocodile
sorry im poking around but its taking so much to get the page to load with out auth and a db set up lol
Orinoco CrocodileOP
No worries, anything that helps
@Patrick MacDonald what about here
if (!sp.has('locale')) {
sp.set('locale', encodeURIComponent(locale));
in your proxy
Orinoco CrocodileOP
If I’m not wrong this is in my proxy file? I didn’t change it here, but it seems to have no influence on the result. This works perfectly fine.
it might casue isues else where when it from my experince when it goes in the url its gets encoded automaticly
@Orinoco Crocodile hey, I deployed it and its working
Orinoco CrocodileOP
The thing is it works in development
Not in production
Im hosting on vercel
Orinoco CrocodileOP
Do you mind adding some expenses
I’ll try to find a specific use case where it doesn’t work and I’ll get back to you. Unfortunately I only have access to a phone right now…
lol I dont have a db set up
well i gave it an empty db so it would shut up lol
and I made a better auth too but i ripped out most of the proxy junk that was bouncing me out
Orinoco CrocodileOP
Perfect, I can get you something in some hours
sweet