v6.4 Default search params

[ngunna]

I have several routes that I would like to have a default search param, I can see that the hook useSearchParams provides a way to set defaults, however, those defaults do not get reflected in the URL nor can they be factored in to route load requests.

useSearchParams({groupId: '123abc'}) results in a URL without any search parameters ("/example") and obviously you would not be able to access that in your route loader while requesting data.

I am wondering what is recommended in this case. A fetcher? setSearchParams? Either of those seems a bit wasteful as you would always be triggering route loading twice, the initial load and then a subsequent one from either fetcher or setSearchParams. Surely you could handle this manually as well by "doing the right thing" in the route loader and defaulting values accordingly for requests and manually modifying the URL to include the correct search parameters, but that is a bit messy and prone to error.

I think the ideal situation would be the ability to specify the default search parameters in the route definition, and have the route matching process update the URL with the search params and therefore make it accessible inside of route data loaders.

{
        path: '/example',
        element: <ExampleComponent/>,
        loader: async (route) => {
            let url = new URL(route.request.url);
            let groupId = url.searchParams.get('groupId');
            return { example: await getExample(groupId) }
        },
        defaultSearchParams: {
            groupId: "123abc"
        }
}

With this a request to /example would result in /example?groupId=123abc, route.request.url would have groupId for data requests, and now obviously useSearchParams would include that as well.

[bradleylandis]

I think one way to achieve what you are looking for would be to use a useEffect. check for search params and then set the search params as necessary:

const [params, setParams] = useSearchParams();
React.useEffect(() => {
    const searchParams = Object.fromEntries(params);
    if (!searchParams.groupId) {
      setParams({ ...searchParams, groupId: 1 });
    }
  }, [params, setParams]);

[ngunna]

Thanks for the response @bradleylandis, that is definitely an option and one that I have considered. However, as I alluded to in the original post regarding either fetcher or setSearchParams (setParams in your example), that sort of approach in combination with route data loaders seems less than ideal since you would be triggering the route data loader twice. Yes, sure I could prevent making network requests until it is present in the loader, but something about that feels wrong to me. I can imagine a scenario where I have a non-trivial loader with several requests, not dependent on the param in question. Then I am left to either defer those until the param is present in the loader next time or always make duplicate requests.

It seems the react-router team has at least considered the idea of having defaulted searchParams, since they allow for a defaultInit in the useSearchParams hook.

declare function useSearchParams(
  defaultInit?: URLSearchParamsInit
): [URLSearchParams, SetURLSearchParams];

The only downfall being that those defaults are entirely disconnected from the URL and therefore the route data loader.