Keep searchParams when changing route

[wise hemlock]

Hi guys, i would to know if it's possible to keep searchParams when we change the route ?

[jade basin]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[sullen moon]

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

[wise hemlock]

Okay, i see. It's the plan informations than i send to params

[fair ermine]

You can use window.history.pushState

[wise hemlock]

But, when i change locale, the params moved ^^

[fair ermine]

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? @wise hemlock

[wise hemlock]

Yeah, i think. It's a good way to do that. Thanks, i'll test 😉

[fair ermine]

no worries, go thru it and ping me for questions

[wise hemlock]

Can i ask you a question @fair ermine ? Why did you use the useTransition hook ?

Tbh, i never see it before ^^

[fair ermine]

its a pretty new hook

[wise hemlock]

I was just curious

[fair ermine]

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

https://react.dev/reference/react/startTransition

[wise hemlock]

Ohh okay, and then you can render like a spinner or something like that when it's loading ?

[fair ermine]

apologies

wrong docs lol

https://react.dev/reference/react/useTransition

its useTransition xD

[wise hemlock]

np x)

[fair ermine]

yessir

[wise hemlock]

Okayyy i see

That's cool tbh

[fair ermine]

Ikr

I use it everywhere now

[fair ermine]

@wise hemlock if your query is solved, mark a solution

[fair ermine]

Boop