Update search params withour re-running loader
Hi! We're migrating from next.js to tanstack/start. We have a games page with results and future games. There is also an inline calendar on this page, which scrolls to the selected date when clicked. When clicking on the calendar, we add the date to the query parameter. ?date=, so that you can share this link. This was implemented via history.replaceState.
After the migration, it breaks, because when the query parameters are changed, the loader starts again and the rerender occurs, I do not want run loader and rerender, I just need to scroll and add the parameter to the link, how can this be achieved?
After the migration, it breaks, because when the query parameters are changed, the loader starts again and the rerender occurs, I do not want run loader and rerender, I just need to scroll and add the parameter to the link, how can this be achieved?
export const Route = createFileRoute('/$')({
loader: async ({ location }) => {
const urlParts = tanStackUrlUtility.getUrlParts(location);
const { response, type } = await dynamicPageUtility.getPageType({
urlParts,
});
const page = DYNAMIC_PAGE_CONFIG[type];
if (!page) {
throw notFound();
}
const data = await page.getData({
...response,
urlParts,
});
return {
type,
data,
};
},
component: CatchAllRoute,
head: ({ loaderData }) => {
return metadataPropsToTanStackHead(loaderData?.data.metadata);
},
headers: (ctx) => {
if (!ctx.match.error) {
return { 'Cache-Control': 'public, s-maxage=60, max-age=60, stale-while-revalidate=300' };
}
},
});
function CatchAllRoute() {
const { type, data } = Route.useLoaderData();
return <DynamicPage type={type} componentProps={data.componentProps} />;
}
const onChange = (id: string) => {
const dateObject = dateUtility.createDateObject(id);
window.history.replaceState(
null,
'',
);
},
