サンプルイメージ
このサンプルは、ReactとLaravelでAPI連携して成功した場合にダッシュボードに自動遷移するというサンプルです。
前回の記事↓
手順
ログイン画面を起動します
ログイン画面にユーザ名とパスワードを入力します
Laravelへデータ連携完了後、ダッシュボードに自動遷移します
ダッシュボードの戻るボタンをクリックするとログイン画面に遷移します。
このようなサンプルを作ってみましょう。
ディレクトリ構成
この記事では、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サイト
npm install react-router-dom
tailwindcssをインストール
まだ、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が正しくラップする）
@tailwind base;
@tailwind components;
@tailwind utilities;
import "./index.css"; // Tailwind CSSをインポート
全体のコードはこちら↓
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を使ってログイン画面に戻る機能も設置しています。
'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ファイルは下記のようになっています。
こちらを、先ほど作ったindex.tsxを読み込むようにするため下記の通りに修正します。
<!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にもスタイリングを反映させるため下記の通り修正します。
/** @type {import('tailwindcss').Config} */
export default {
content: [
//設定したい拡張子を入れる
"./index.html","./src/**/*.{js,jsx,ts,tsx}"
],
theme: {
extend: {},
},
plugins: [],
}
以上で設定は終了です。