#Query param on index

1 messages · Page 1 of 1 (latest)

sudden quarry
#

Hello ! I am looking for advice.

I am looking for the best way to set query param on an index route, because, on this index element, I am using the params for filtering my list, by default, I want to apply a param ''?search=new'' for example.

I have done before directly in the page component with useSearchParams, but, first round, it returns me all the list, then it blinks because I update searchParams with the default query. So this was not a good way for my case.

For now, I have done this in the loader of that route like this
`
export const listLoader = async ({ request }: LoaderFunctionArgs) => {
const url = new URL(request.url);
const searchParams = url.searchParams;

if (!searchParams.get('search')) {
searchParams.set(queryParamstatus, 'new');
throw redirect(url.href);
}

const dataList = await dataService.getData()
return { dataList };
};
`

I am wondering if this is the good way to do that ? Or are there more interesting way to do that ? for example in createBrowserRouter ?

Thanks a lot !

ionic abyss
#

Combining server-side and client-side handling ensures that your application behaves correctly regardless of how the user navigates to the route. The server-side loader ensures the URL always has the correct parameters, and the client-side useEffect smoothens the user experience by setting parameters without causing a visible re-render or blink. This approach should cover all bases and provide a seamless experience.