# ログイン後のレイアウトを作成
次にログイン後のレイアウトを作成しましょう。
`feature/after-login-layout-page`にて作業します。
```bash
git switch -c feature/after-login-layout-page
```
`templates`配下に`LoginLayout.tsx`を作成しましょう。内容は以下のように記述します。
import { Outlet } from "react-router-dom";
export const LoginLayout = () => {
return (
<div className="relative">
<header className="bg-white fixed top-0 left-0 right-0 leading-[50px]">
<div className="sm:container sm:mx-auto flex justify-between">
<p className="logo">
スケジュール管理APP
</p>
<nav>
<ul className="flex justify-center gap-5 text-lime-800">
<li className="flex items-center">ユーザー名</li>
<li className="flex items-center">ログアウト</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ページに遷移するようにしましょう。
import { Link, Outlet } from "react-router-dom";
import { loginUserState } from "../../store/loginUserState";
export const LoginLayout = () => {
const loginUser = useRecoilValue(loginUserState);
return (
<div className="relative">
<header className="bg-white fixed top-0 left-0 right-0 leading-[50px]">
<div className="sm:container sm:mx-auto flex justify-between">
<p className="logo">
<Link to="/">スケジュール管理APP</Link>
</p>
<nav>
<ul className="flex justify-center gap-5 text-lime-800">
<li className="flex items-center">ユーザー名</li>
<li className="flex items-center">ログアウト</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>
);
}
ユーザー名の部分はglobal stateの`loginUser.name`を表示するようにしましょう。
import { Link, Outlet } from "react-router-dom";
import { useRecoilValue } from "recoil";
import { loginUserState } from "../../store/loginUserState";
export const LoginLayout = () => {
const loginUser = useRecoilValue(loginUserState);
return (
<div className="relative">
<header className="bg-white fixed top-0 left-0 right-0 leading-[50px]">
<div className="sm:container sm:mx-auto flex justify-between">
<p className="logo">
<Link to="/">スケジュール管理APP</Link>
</p>
<nav>
<ul className="flex justify-center gap-5 text-lime-800">
<li className="flex items-center">{loginUser.name}</li>
<li className="flex items-center">ログアウト</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>
);
}
ログアウトのリンクを押した際は、`loginUser`を初期値に戻して、ログインページに戻るようにしましょう。現在`useRecoilValue`を使用してstateのみを扱っていましたが、setStateも扱うため、`useRecoilState`に変更しましょう。
import { Link, Outlet, useNavigate } from "react-router-dom";
import { useRecoilState } from "recoil";
import { loginUserState } from "../../store/loginUserState";
export const LoginLayout = () => {
const navitate = useNavigate()
const [loginUser, setLoginUser] = useRecoilState(loginUserState)
const handleLogout = () => {
setLoginUser({ id: 0, name: "" })
navitate("/login")
}
return (
<div className="relative">
<header className="bg-white fixed top-0 left-0 right-0 leading-[50px]">
<div className="sm:container sm:mx-auto flex justify-between">
<p className="logo">
<Link to="/">スケジュール管理APP</Link>
</p>
<nav>
<ul className="flex justify-center gap-5 text-lime-800">
<li className="flex items-center">{loginUser.name}</li>
<li className="flex items-center">
<a onClick={handleLogout}>ログアウト</a>
</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>
)
}
また、各ナビゲーションメニューのリンクに、アイコンを表示しましょう。
`react-icons`をインストールします。
```bash
npm i react-icons
```
アイコンは以下サイトから調べることができます。
{% embed url="" %}
今回はユーザーネームの部分に``を使用し、ログアウトの部分に``を使用します。
import { Link, Outlet, useNavigate } from "react-router-dom";
import { useRecoilState } from "recoil";
import { loginUserState } from "../../store/loginUserState";
import { FaUser } from "react-icons/fa";
import { MdLogout } from "react-icons/md";
export const LoginLayout = () => {
const navitate = useNavigate()
const [loginUser, setLoginUser] = useRecoilState(loginUserState)
const handleLogout = () => {
setLoginUser({ id: 0, name: "" })
navitate("/login")
}
return (
<div className="relative">
<header className="bg-white fixed top-0 left-0 right-0 leading-[50px]">
<div className="sm:container sm:mx-auto flex justify-between">
<p className="logo">
<Link to="/">スケジュール管理APP</Link>
</p>
<nav>
<ul className="flex justify-center gap-5 text-lime-800">
<li className="flex items-center">
<FaUser />
{loginUser.name}
</li>
<li className="flex items-center">
<MdLogout />
<a onClick={handleLogout}>ログアウト</a>
</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>
)
}
最後にこちらのコンポーネントにて、ログインしていない場合にログインページにリダイレクトさせるようにします。
ログインしていない場合は、global stateの`loginUser.id`にて判断しましょう。リダイレクトは、`react-router-dom`の`Navigate`タグにて実現することができます。
import { useRecoilState } from 'recoil'
import { loginUserState } from '../../store/loginUser'
import { Link, Navigate, Outlet, useNavigate } from 'react-router-dom'
import { FaUser } from "react-icons/fa";
import { MdLogout } from "react-icons/md";
export const LoginLayouts = () => {
const navigate = useNavigate();
const [loginUser, setLoginUser] = useRecoilState(loginUserState)
const handleLogout = () => {
setLoginUser({ id: 0, name: "" })
navigate("/login")
}
if (loginUser.id === 0) return <Navigate to="/login" />;
return (
...
ではこちらを`routes.ts`にて呼び出しましょう。
まず`{ path: "/calendar", element: }`を削除して、カレンダーページのパスを削除します。そして、ログインしている場合は``を表示するので、配列に新しい要素を追加します。その中の`elements`に``を指定して、`children`にログインしている場合に表示するページを格納していきます。ですので、`/calendar`の場合に``を表示するようにセットします。
import { createBrowserRouter } from "react-router-dom";
import { TopPage } from "./components/pages/TopPage";
import { LoginPage } from "./components/pages/LoginPage";
import { NotLoginLayout } from "./components/templates/NotLoginLayouts";
import { CalendarPage } from "./components/pages/CalendarPage";
import { LoginLayout } from "./components/templates/LoginLayout";
export const router = createBrowserRouter([
{
path: "/",
element: <NotLoginLayout />,
children: [
{ index: true, element: <TopPage /> },
{ path: "/login", element: <LoginPage /> },
],
},
{
element: <LoginLayout />,
children: [{ path: "/calendar", element: <CalendarPage /> }],
},
]);
これでログインしていない場合に`/calendar`に遷移すると、ログインページにリダイレクトし、ログインすると`/calendar`ページに遷移することができるかと思います。
ここまでの作業をcommitしましょう。
```bash
git add .
```
```bash
git commit
```
commitメッセージは
```
feat: ログイン後のレイアウトを作成
```
としましょう。
ではログイン後のレイアウトの実装が完了したので、GitHubにpushしましょう。
```bash
git push origin feature/after-login-layout-page
```
これでGitHubのリポジトリのページにいき、main <- feature/after-login-layout-pageのPRを作成しましょう。
PRのタイトルは
```
feat: ログイン後のレイアウトを作成
```
としましょう。
作成したら自身で`Merge pull request`を押してmergeしましょう。
mergeが完了したらWarpに戻り、mainをpullしましょう。
```bash
git switch main
```
```bash
git pull origin main
```