useRouter


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



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



<div id="toc_container" class="no_bullets"><p class="toc_title">目次</p><ul class="toc_list"><li><a href="#i">リダイレクトが動作しなかった原因</a><ul><li><a href="#i-2">問題コード</a></li></ul></li><li><a href="#i-3">解決方法</a><ul><li><a href="#i-4">解決コード</a></li></ul></li></ul></div>
<h2><span id="i">リダイレクトが動作しなかった原因</span></h2>



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



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



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



<h3><span id="i-2">問題コード</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>import {useRouter} from &quot;next/router&quot;;


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

    const handleSubmit = (e) =&gt; {
        router.push(&#39;/post&#39;);    // リダイレクトされない
    };
    
    return (
        &lt;form action=&#39;&#39; onSubmit={handleSubmit}&gt;  // action=&#39;&#39;へリダイレクトする
            &lt;input type=&quot;text&quot; /&gt;
            &lt;button type=&quot;submit&quot;&gt;送信ボタン&lt;/button&gt;
        &lt;/form&gt;
    );
};</code></pre></div>



<h2><span id="i-3">解決方法</span></h2>



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



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



<h3><span id="i-4">解決コード</span></h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>import {useRouter} from &quot;next/router&quot;;


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

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



<p></p>



<ul class="references"><li><a href="https://developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">フォームデータの送信 &#8211; ウェブ開発を学ぶ | MDN</a></li></ul>


「useRouter」の記事一覧