Next.js Discord

Discord Forum

Keep searchParams when changing route

Unanswered
Savannah posted this in #help-forum
Open in Discord
SavannahOP
Hi guys, i would to know if it's possible to keep searchParams when we change the route ?

40 Replies

@Savannah Hi guys, i would to know if it's possible to keep searchParams when we change the route ?
joulev
You have to add the search params manually. Like <Link href={/home + getSearchParams()} />
No way to do it automatically, unless you make a Link wrapper or something similar
If you want to persist some info, better to use localstorage and/or cookies
@joulev If you want to persist some info, better to use localstorage and/or cookies
SavannahOP
Okay, i see. It's the plan informations than i send to params
Arinji
You can use window.history.pushState
SavannahOP
But, when i change locale, the params moved ^^
Arinji
one sec, i have some nice code which does adding to the url + a submit button
Ok so imagine you have an input
  <input
              type="text"
              placeholder="Search by name..."
              onChange={(e) => {
                params.delete("search_link");
                params.set("search_name", e.target.value);
                window.history.pushState(null, "", `?${params.toString()}`);
              }}
              className="w-full h-[40px] bg-palette-bg text-palette-text border-neo-brutalist border-black rounded-neo-brutalist p-2"
            />
thats how your input would look
focus on the window.history.pushState
thats how you add to the url without accidently navigating to the page
const searchParams = useSearchParams();
  const params = new URLSearchParams(searchParams);
thats how you would define searchParams and params for nice ts
all your changes get saved to the params var, so to finally push to the url + have loading states

<button
              onClick={() => {
                startTransitionName(() => {
                  router.replace(`${pathname}?${params.toString()}`);
                });
              }}
              className="size-[40px] shrink-0 bg-palette-accent border-neo-brutalist border-black flex flex-col items-center justify-center rounded-neo-brutalist"
            >


  const [isLoadingName, startTransitionName] = useTransition();
makes sense? @Savannah
@Arinji makes sense? <@811720203531976714>
SavannahOP
Yeah, i think. It's a good way to do that. Thanks, i'll test 😉
Arinji
no worries, go thru it and ping me for questions
SavannahOP
Can i ask you a question @Arinji ? Why did you use the useTransition hook ?
Tbh, i never see it before ^^
Arinji
its a pretty new hook
SavannahOP
I was just curious
Arinji
basically the hook makes it so it gives a loading variable when you start doing a transition
its a react thing, lemme find the docs
SavannahOP
Ohh okay, and then you can render like a spinner or something like that when it's loading ?
Arinji
apologies
wrong docs lol
its useTransition xD
SavannahOP
np x)
@Arinji yessir
SavannahOP
Okayyy i see
That's cool tbh
Arinji
Ikr
I use it everywhere now
Arinji
@Savannah if your query is solved, mark a solution
Original message was deleted
Arinji
Boop
@Arinji <@811720203531976714> if your query is solved, mark a solution
SavannahOP
Sorry, i was at the gym bro. I'll test it tomorrow. If i fix it, i'll put it solved 😉