ユーザーアイコン

mizuko

約1か月前

0
0

Next.jsでクエリパラメータを動的に付与する

Next.js

タブ切り替えでパラメーターを切り替える例

const handleTabClick = (tab: UserCategoryTab): void => { setCategoryId(tab.categoryId); setMemoPage(1); setMemoHasMore(true); setMemos([]); setTabs((prevTabs) => prevTabs.map((prevTab) => ({ ...prevTab, isSelected: prevTab.id === tab.id, })) ); updateSearchParams({ tab: tab.id.toString(), }); };
const updateSearchParams = useCallback( (newParams: Record<string, string>): void => { const current = new URLSearchParams(Array.from(searchParams.entries())); Object.entries(newParams).forEach(([key, value]) => { if (value === null || value === '') { current.delete(key); } else { current.set(key, value); } }); router.replace(`${pathname}?${current.toString()}`); }, [pathname, router, searchParams] );