💨

Next.js(React)でページ遷移時にクエリパラメータを保持する

2022/02/09に公開

前提

  • react: 17.0.2
  • next: 12.0.8

実装

useRouterのqueryをそのまま渡せば良い

pages/sample.tsx
import { useRouter } from 'next/router';

export default function Apply() {
  const router = useRouter();

  const handleRoute = () => {
    router.push({
      pathname: `/somepage`, // 遷移先のページ
      query: { ...router.query }, // useRouter().queryをそのまま渡せば良い
      // query: { someParam: `value`, ...router.query }, // 他にも渡したいものがある場合
    });
  };

  return (
    <button type="button" onClick={handleRoute}>ページ遷移</button>
  );
}

Discussion