💨
Next.js(React)でページ遷移時にクエリパラメータを保持する
前提
- 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