# ログイン画面の作成1 次はログイン画面を作成していきます。 `feature/login-page`にて作業します。 ```bash git switch -c feature/login-page ``` `pages`配下に`LoginPage.tsx`を作成し、`rafc`を入力して、`Enter`を押しましょう。

export const LoginPage = () => {
  return (
    <div>LoginPage</div>
  )
}

ここでURLにて、`/`とした際はTopページを表示し、`/login`とした際はログインページを表示するようにします。そのため`react-router-dom`をインストールします。 ```bash npm i react-router-dom ``` 次に、`src`配下に`routes.tsx`を作成します。その中で`react-router-dom`の`createBrowserRouter`を使用し、以下のように`router`を定義します。 {% code title="src/routes.tsx◎" %} ```tsx import { createBrowserRouter } from "react-router-dom"; import { TopPage } from "./components/pages/TopPage"; import { LoginPage } from "./components/pages/LoginPage"; export const router = createBrowserRouter([ { path: "/", element: }, { path: "/login", element: }, ]); ``` {% endcode %} このように記述することで、`/`とした際はTopページが表示され、`/login`とした際はログインページが表示されるようになります。そしてmain.tsxにて、`RouterProvider`を呼び出し、先ほど作成した`router`を渡すことで準備は完了です。

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider } from "react-router-dom";
import './styles/index.css'
import "./styles/output.css"
import "./styles/destyle.css";
import { router } from './routes';

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

実際にブラウザにてurlを`/`、`/login`と入力することでページが変わることが確認できるかと思います。また、`createBrowserRouter`にて共通するレイアウトを設定することができ、`element`に共通するレイアウトのコンポーネントをセットし、`children`に`path`とそれに対応する`element`を配列の形で渡すことで、childrenに渡した全てのページにて、`element`（以下の場合は、NotLoginLayoutのコンポーネント）のコンポーネントが表示されることができます。

import { createBrowserRouter } from "react-router-dom";
import { TopPage } from "./components/pages/TopPage";
import { LoginPage } from "./components/pages/LoginPage";
import { NotLoginLayout } from "./components/templates/NotLoginLayouts";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <NotLoginLayout />,
    children: [
      { index: true, element: <TopPage /> },
      { path: "/login", element: <LoginPage /> },
    ],
  },
]);

そして、NotLoginLayoutコンポーネントにr`eact-router-dom`の`Outlet`を呼び出すことで、``の部分に各パスの`element`が埋め込まれるようになります。 (`/`の場合は``、`/login`の場合は``が埋め込まれます。)

import { 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">スケジュール管理APP</p>
          <nav>
            <ul className="flex gap-5 text-lime-800">
              <li>ご利用方法</li>
              <li>ログイン</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>
  );
}

上記のように編集したので、`TopPage.tsx`のNotLoginLayoutを削除しましょう。 {% code title="pages/TopPage.tsx◎" %} ```tsx import { PrimaryBtn } from "../atoms/PrimaryBtn"; export const TopPage = () => { return (

スケジュール管理APP

お互いのスケジュールを管理するアプリです

ログイン

); } ``` {% endcode %} ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: react-router-domを導入 ``` としましょう。