GitHub Copilotで、ReactのuseRouterを完全に理解した

# はじめに

https://qiita.com/Jasmine_teeeeee/items/71d5caa3f1d54ccf8918

これの続きです。

# STEP
・[要件整理（画面デザイン作成）](https://qiita.com/Jasmine_teeeeee/items/e65e6e41f1eaced9d71d)　
・フロンドエンド開発
　・[静的画面](https://qiita.com/Jasmine_teeeeee/items/d087b0b309508c7ceaec)
　・[表示切り替え（useState）](https://qiita.com/Jasmine_teeeeee/items/71d5caa3f1d54ccf8918)　
　・[画面遷移（useRouter）](https://qiita.com/Jasmine_teeeeee/items/6848f94dcec817d3e04f) 　←いまここ
　・[APIモック作成](https://qiita.com/Jasmine_teeeeee/items/76294bb468a065400b0e) 
・バックエンド開発

## 今回のやることとゴール

このSTEPではひとつ前の工程作成したログイン画面から、メイン画面への遷移処理を追加します。

## 目次

１\. ボタン押下時の処理をCopilotに伝える

# 開発開始

このコードを修正していきます。

```src\app\login\page.tsx

'use client'

import { useState, Dispatch, SetStateAction } from 'react'

interface LoginFormProps {
  setIsLoginView: Dispatch<SetStateAction<boolean>>
}

export default function LoginForm({ setIsLoginView }: LoginFormProps) {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  return (
    <>
      <form className="space-y-6">
        ～省略～

        <button
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50"
        >
          ログイン
        </button>
      </form>

    ～省略～
   
    </>
  )
}


```

作業ファイルを設定して、以下の呪文を唱えます。

>ログインボタンをクリックすると/dashboardに遷移する。
isLoading中の場合、ボタンには「ログイン中...」を表示し、ボタンは非活性とする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/c8b6f0f4-abff-053f-a6b7-c1d3da516aa1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/1ae64177-c5ef-8946-c835-f885b7f2eef0.png)


```修正後src\app\login\page.tsx

'use client'

import { useState, Dispatch, SetStateAction } from 'react'
import { useRouter } from 'next/navigation'

interface LoginFormProps {
  setIsLoginView: Dispatch<SetStateAction<boolean>>
}

export default function LoginForm({ setIsLoginView }: LoginFormProps) {
  const router = useRouter()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)
    
    try {
      // TODO: 実際のログイン処理をここに実装
      await new Promise(resolve => setTimeout(resolve, 1000)) // ログイン処理のシミュレーション
      router.push('/dashboard')
    } catch (error) {
      console.error('Login failed:', error)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <>
      <form className="space-y-6" onSubmit={handleSubmit}>
        ～省略～

        <button
          type="submit"
          disabled={isLoading}
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50"
        >
          {isLoading ? 'ログイン中...' : 'ログイン'}
        </button>
      </form>

      ～省略～
    </>
  )
}


```

完成！！


## 動かしてみよう

クリック後のボタン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/ca99d789-eb72-6254-eeed-7fd3fba7ca6a.png)

画面遷移

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778585/0e7d25ee-0655-ed74-beb5-b4c5a0ffac2f.png)


# まとめ

画面遷移は簡単でしたね。