フォーム送信時「useRouter()」でリダイレクトができなかった原因。

2022/6/15

フォーム送信時（onSubmit時）に、いろいろな処理をして、最後にリダイレクトをかける処理をするためにrouter.push()を活用しようとしました。

ですがrouter.push()が上手く動作せずに困ったので解決法メモです。

リダイレクトが動作しなかった原因
- 問題コード
解決方法
- 解決コード

リダイレクトが動作しなかった原因

初歩的なミスで、<form>の動作を理解していなかったことが原因でした。

<form>の送信時には、デフォルトで<form action='〇〇'>で指定しているURLへリダイレクトがかかります。

下記コードの場合「onSubmitで実行される関数内のrouter.push()」より、「action=’〇〇’へのリダイレクト」が先に起きていました。

問題コード

import {useRouter} from "next/router";


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

    const handleSubmit = (e) => {
        router.push('/post');    // リダイレクトされない
    };
    
    return (
        <form action='' onSubmit={handleSubmit}>  // action=''へリダイレクトする
            <input type="text" />
            <button type="submit">送信ボタン</button>
        </form>
    );
};

解決方法

useRouter()でリダイレクトをかけるためには、form action='〇〇'によるリダイレクト処理を止める必要があります。

formのデフォルト処理を止めるにはe.preventDefault();が有効です。

解決コード

import {useRouter} from "next/router";


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

    const handleSubmit = (e) => {
        e.preventDefault();    // これでaction=''へのリダイレクト処理がストップできる
        router.push('/post');
    };
    
    return (
        <form action='' onSubmit={handleSubmit}>
            <input type="text" />
            <button type="submit">送信ボタン</button>
        </form>
    );
};