【Laravel連携】Reactで自動ページ遷移する方法

# サンプルイメージ
このサンプルは、ReactとLaravelでAPI連携して成功した場合にダッシュボードに自動遷移するというサンプルです。

<b>前回の記事↓</b>

https://qiita.com/SKY-HaYaTo/items/3bc30b8963851aab16b1


 ## 手順
<b>ログイン画面を起動します</b>
![今日のログイン画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/975f246a-86ab-c1ae-afa8-af3b375c8df7.png)

<b>ログイン画面にユーザ名とパスワードを入力します</b>
![今日のログイン画面入力.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/bcf21e64-ba78-1893-e531-4b3f0fcc6a51.png)

<b>Laravelへデータ連携完了後、ダッシュボードに自動遷移します</b>
<b>ダッシュボードの戻るボタンをクリックするとログイン画面に遷移します。</b>
![今日のダッシュボード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/13f43ecf-17da-8e41-9966-f5e63a1812ad.png)

このようなサンプルを作ってみましょう。

# ディレクトリ構成
この記事では、Reactをメインで書いていきます。

図の通り、更新するファイルは下記のとおりです。
■dashboard/page.tsx
■index.tsx
■index.html
■tailwind.config.js

```
ReactLaravelProject
/backend
└─ app
   └─ Http
      └─ Controllers
         └─ RegisterController.php
//以下、Laravelディレクトリは省略
/frontend
├─ src
│  ├─ dashboard　←←←新規追加作成するフォルダ
│  │  └─ page.tsx　←←←新規追加作成するファイル
│  ├─ App.tsx
│  ├─ index.css
│  ├─ index.tsx　←←←新規追加作成するファイル
│  └─ main.tsx
├─ index.html　←←←修正するファイル 
└─ tailwind.config.js　←←←修正するファイル
```

# ページ遷移に必要なnpmパッケージをインストール

React Routerを使用するため、以下のパッケージをインストールします。

react-router-domの公式npmサイト

https://www.npmjs.com/package/react-router-dom

```
npm install react-router-dom
```

## tailwindcssをインストール
:::note warn
まだ、Tailwindcssを仁洙摂るしていない場合は、下記のコマンドを実行してください。
```
$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init
```
:::



# ログイン画面のファイル群を修正する
## ①index.tsxを新規作成する
ルーティング設定をするため`index.tsx`を作成します。
`index.tsx`にもTailwindCSSのスタイルを充てるために、`index.css`をインポートします。

ここで`index.tsx`としての機能は、下記の通り
■ReactDOM.createRoot を使用して正しくルートをレンダリングします。
■React Router の設定を確認します（BrowserRouterが正しくラップする）

```frontend/src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

```frontend/src/index.tsx
import "./index.css"; // Tailwind CSSをインポート
```


全体のコードはこちら↓
```frontend/src/index.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import Dashboard from "./dashboard/page";
import "./index.css"; // Tailwind CSSをインポート

const Root = () => (
  <BrowserRouter>
    <Routes>
      {/* ルート設定 */}
      <Route path="/" element={<App />} />
      <Route path="/dashboard" element={<Dashboard />} />
    </Routes>
  </BrowserRouter>
);

const rootElement = document.getElementById("root");
if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(<Root />);
} else {
  console.error("Root element not found");
}

```

## 遷移先の画面を作成する
遷移先のダッシュボード画面は下記のとおりです。

npmパッケージの`useNavigate`を使ってログイン画面に戻る機能も設置しています。

```frontend/src/dashboard/page.tsx
'use client'
import { useNavigate } from "react-router-dom"

export default function dashboard(){
    //ページナビゲータを用意する
    const navigate = useNavigate();
    const backToLogin = ()=>{
        navigate('/');
    }
    return (
        <div>
            ダッシュボード
            <div>
                <button type="button" onClick={backToLogin} className="bg-blue-500 text-white font-bold px-4 py-4">
                    ログイン画面に戻る
                </button>
            </div>
        </div>
    )
} 
```

## index.htmlファイルを修正する
つづいて、`index.html`ファイルを修正します。
Reactプロジェクト作成時の`index.html`ファイルは下記のようになっています。
![デフォルトのindexHTMLファイル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/7c13eda2-4016-4341-09d8-90204dfe2f7f.png)

こちらを、先ほど作った`index.tsx`を読み込むようにするため下記の通りに修正します。
![修正後のindexHTML.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/e8fde0ef-1ffa-e71c-8310-89d9ff13463f.png)


```frontend/index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>

```

## tailwind.config.jsを修正する
`index.html`にもスタイリングを反映させるため下記の通り修正します。

```frontend/tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    //設定したい拡張子を入れる
    "./index.html","./src/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}


```

以上で設定は終了です。