[Docs] Explain how to keep search parameters when using router

[JulianCataldo]

It's not clear actually how to keep the searchParams even when router programmatically.

Gist:

export const router = createRouter(
  routes,
  { links: false }
);
export const searchParams = createSearchParams({ links: false });


const path = getPagePath(router, name, ...params);

router.open(path + location.search);

Triggering router.open will not automatically reuse search params for current location or the searchParams store.

Adding location.search will ensure that you keep search params between route changes, so it can be used for storing UI states, for example.

Maybe there is a more elegant way, but this one works and is straightforward. Or I'm missing something?

Thanks!

[ai]

Yes, the current searchParams was created to be used on a single page (for instance, for filters on a search page).

If you need ? paras on every page, maybe it is better to create another router store (this repo is a very simple implementation to be nano). Don’t afraid, it is easy to do.

[ai]

We can add a note about limitation to docs. Could you send PR?

[JulianCataldo]

Mhhh, I was referring to SPA routes changes, not hard, MPA routes changes.

I did a clip to better illustrate this matter.
Consider this:

demo-routing-params.mp4

I've mocked up this two helpers functions (code's a bit dirty, it's a test):

export function changeUiState<
  T extends keyof SearchParams,
  V extends SearchParams[T]
>(key: T, value: V) {
  if (key && value) {
    searchParams.open({ ...searchParams.get(), [key]: value });
  }
}
console.log(location.href, location.search);
export function to<
  Config extends typeof routes,
  PageName extends keyof typeof routes
>(
  // router: Router<Config>,
  name: PageName,
  ...params: ParamsArg<Config, PageName>
) {
  console.log({ params });

  const pathh = getPagePath(router, name, ...params);

  router.open(pathh + location.search);
  console.log("go");
}

That way, it's not amnesic anymore :pp

It wraps the helper, forwards correct typings, and incidentally makes the API a bit more succinct (2 args instead of 3, we skip passing the router each time).
Also it kind of "binds" the two stores (searchParams is technically a store, right?).
It's a good place to add business logic in the future if needed, too.

to("content", { path: node.id });

changeUiState("editor", "data");

Of course it's not perfect, just trying things ^^.

Anyway, thanks for building awesomeness!

[ai]

In 0.14 we added route.search to normal router and removed createSearchParams.

Now you can use:

router.open(path + location.search)