# ログイン画面の作成4 次にリンクを貼りましょう。ヘッダーのロゴをクリックした際にTopページに、右上のログインをクリックした際にログインページに遷移するようにしましょう。その際は、`react-router-dom`の`Link`タグを使用します。`Link`タグは`to`に遷移したいurlを渡すことで、そのurlに遷移することができます。

import { Link, Outlet } from "react-router-dom"

export const NotLoginLayout = () => {
  return (
    <div className="relative">
      <header className="bg-white leading-[50px] fixed top-0 left-0 right-0">
        <div className="container mx-auto flex justify-between">
          <p className="logo">
            <Link to="/">スケジュール管理APP</Link>
          </p>
          <nav>
            <ul className="flex gap-5 text-lime-800">
              <li>ご利用方法</li>
              <li>
                <Link to="/login">ログイン</Link>
              </li>
            </ul>
          </nav>
        </div>
      </header>
      <main className="pt-[50px] bg-gradient-to-r from-lime-100 to-lime-200 h-screen flex flex-col justify-center items-center">
        <Outlet />
      </main>
    </div>
  );
}

画面にて画面遷移することが確認できるかと思います。次に、Topページ中央のログインボタンを押した際にログインページに遷移できるようにします。その前にPrimaryBtnコンポーネントにて`onClick`を受け取れるようにします。

import { ReactNode } from "react";

type PropsType = {
  onClick: () => void
  children: ReactNode
}

export const PrimaryBtn = ({ onClick, children }: PropsType) => {
  return (
    <button className="bg-lime-800 text-white p-4 text-lg rounded-lg" onClick={onClick}>
      {children}
    </button>
  );
};

そして、`react-router-dom`の`useNavigate`というhooksを使用します。その`useNavigate`の`navigate`という関数で引数に遷移したいurlを渡すことで、そのurlに遷移することができます。

import { useNavigate } from "react-router-dom"
import { PrimaryBtn } from "../atoms/PrimaryBtn"

export const TopPage = () => {
  const navigate = useNavigate()

  return (
    <div className="text-center">
      <h1 className="text-7xl logo">スケジュール管理APP</h1>
      <p className="pt-[10vh] text-5xl">
        お互いのスケジュールを管理するアプリです
      </p>
      <div className="pt-[20vh]">
        <PrimaryBtn onClick={() => navigate("/login")}>ログイン</PrimaryBtn>
      </div>
    </div>
  );
}

また、`LoginPage.tsx`の`PrimaryBtn`のonClickには`() => null`を渡しておきます。

import { Input } from "../atoms/Input";
import { PrimaryBtn } from "../atoms/PrimaryBtn";

export const LoginPage = () => {
  return (
    <div className="w-[500px] bg-white rounded-lg shadow-lg py-10">
      <form className="flex flex-col justify-center items-center gap-10">
        <h1 className="text-3xl text-lime-800 font-bold text-center">
          ログイン
        </h1>
        <div className="w-[80%]">
          <Input
            type="text"
            placeholder="email"
          />
        </div>
        <div className="w-[80%]">
          <Input
            type="password"
            placeholder="password"
          />
        </div>
        <PrimaryBtn onClick={() => null}>ログイン</PrimaryBtn>
      </form>
    </div>
  );
};

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: トップページとログインページへのリンクを追加 ``` としましょう。ではログインページの作成が完了したので、GitHubにpushしましょう。 ```basic git push origin feature/login-page ``` これでGitHubのリポジトリのページにいき、main <- feature/login-pageのPRを作成しましょう。 PRのタイトルは ``` feat: ログイン画面を作成 ``` としましょう。作成したら自身で`Merge pull request`を押してmergeしましょう。 mergeが完了したらWarpに戻り、mainをpullしましょう。 ```bash git switch main ``` ```bash git pull origin main ```