Reactの画面遷移に挑戦する

ルート

Markdownのアプリを考えています。

登録、参照はできましたがアプリを作ってみたいと思っています。

Reactで画面遷移の勉強をしたので紹介します。

Reactの画面遷移に興味がある方はご覧ください。

前回の内容は以下を参照してください。

環境構築については、過去のブログを参考にしてください。

ReactでMaterial-UI(MUI)をつかってみる

画面遷移は以下の手順で進めていきます。

  • 1.react-router-domのインストール
  • 2.Reactのページ作成

目次

  1. react-router-domのインストール
  2. Reactのページ作成
    1. ディレクトリ作成
    2. ホームページ作成
    3. ページ1ページ作成
    4. ページ2ページ作成
    5. App.jsファイル更新
    6. 画面イメージ
  3. まとめ

react-router-domのインストール

react-router-domをインストールします。

前提として過去に紹介しているDocker環境を使います。

インストール前にdocker-composeを停止します。

docker-compose.ymlファイルがある場所で以下のコマンドを入力してください。

    
docker-compose down

インストールを行います。

    
docker-compose run --rm web sh -c "cd react-project && npm install react-router-dom"

package.jsonに記載されていれば成功です。

    
project/
　┗ web/
　　　┣ Dockerfile
　　　┗ src/
　　　　　┗ react-project/
　　　　　　　┗ package.json

内容は以下のとおりです。

    
・・・略・・・
  "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.8.0",
    "@mui/material": "^5.8.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-markdown": "^8.0.3",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "remark-gfm": "^3.0.1",
    "web-vitals": "^2.1.4"
  },
}
・・・略・・・

以上でインストールは終了です。

Reactのページ作成

Reactのページを作成します。基本となるホームのページ、ページ1，ページ2の計3つのページをつくります。

ディレクトリ作成

ページを保存するディレクトリを作成します。

「react-project」配下の「src」の配下に「pages」としてディレクトリを作成します。

    
project/
　┗ web/
　　　┣ Dockerfile
　　　┗ src/
　　　　　┗ react-project/
　　　　　　　┗ src/
　　　　　　　　　┣ pages/           
　　　　　　　　　┣ component/
　　　　　　　　　┗ App.js

「pages」の配下には3つのファイルを作成します。

  • ホームページ（HomePage.js）
  • ページ1ページ（Page1Page.js）
  • ページ2ページ（Page2Page.js）

それぞれのページの内容を記述します。

ホームページ作成

「pages」配下に「HomePage.js」ファイルを作成します。

    
project/
　┗ web/
　　　┣ Dockerfile
　　　┗ src/
　　　　　┗ react-project/
　　　　　　　┗ src/
　　　　　　　　　┣ pages/
　　　　　　　　　┃　┗ HomePage.js
　　　　　　　　　┣ component/
　　　　　　　　　┗ App.js

ページの内容は以下のとおりです。H2タグで文字を表示します。

    
export default function HomePage() {

  return (
    <div>
      <h2>ホームページ</h2>
    </div>
  );
}

ページ1ページ作成

「pages」配下に「Page1Page.js」ファイルを作成します。

    
project/
　┗ web/
　　　┣ Dockerfile
　　　┗ src/
　　　　　┗ react-project/
　　　　　　　┗ src/
　　　　　　　　　┣ pages/
　　　　　　　　　┃　┣ HomePage.js
　　　　　　　　　┃　┗ Page1Page.js
　　　　　　　　　┣ component/
　　　　　　　　　┗ App.js

ページの内容は以下のとおりです。H2タグで文字を表示します。

    
export default function Page1Page() {

  return (
    <div>
      <h2>ページ1ページ</h2>
    </div>
  );
}

ページ2ページ作成

「pages」配下に「Page2Page.js」ファイルを作成します。

    
project/
　┗ web/
　　　┣ Dockerfile
　　　┗ src/
　　　　　┗ react-project/
　　　　　　　┗ src/
　　　　　　　　　┣ pages/
　　　　　　　　　┃　┣ HomePage.js
　　　　　　　　　┃　┣ Page1Page.js
　　　　　　　　　┃　┗ Page2Page.js
　　　　　　　　　┣ component/
　　　　　　　　　┗ App.js

Page2Page.jsページの内容は以下のとおりです。App.jsの内容を一部コピーして記述しています。

このページでMarkdownのデータを表示します。

    
import { useState, useEffect } from "react";

import ReactMarkdown from "react-markdown";
import remarkGfm from 'remark-gfm';
import axios from 'axios';
import AppBarBase from "../component/AppBarBase";



function Page2Page() {
  const [text, setText] = useState("");

  const onChangeText = (event) => setText(event.target.value);

  useEffect(() => {
    axios.get('http://localhost:5000/markdown')
      .then(res => {
        setText(res.data.body)
      })
  }, [])

  const onClickText = () => {
    const markdown = {
      body: text
    };
    axios.post(`http://localhost:5000/markdown`, markdown)
      .then(res => {
        console.log(res.data);
      })
  };
  
  
  return (
    <div>
      <h2>ページ１ページ</h2>
      <AppBarBase />
      <div>
        <textarea
          value={text}
          style={{ width: '50%', height: '300px' }}
          onChange={onChangeText}
        ></textarea><button onClick={onClickText}>保存</button>
        <ReactMarkdown remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>
      </div>
    </div>
  );
}


export default Page2Page;

App.jsファイル更新

「App.js」ファイルを更新します。

    
project/
　┗ web/
　　　┣ Dockerfile
　　　┗ src/
　　　　　┗ react-project/
　　　　　　　┗ src/
　　　　　　　　　┣ pages/
　　　　　　　　　┃　┣ HomePage.js
　　　　　　　　　┃　┣ Page1Page.js
　　　　　　　　　┃　┗ Page2Page.js
　　　　　　　　　┣ component/
　　　　　　　　　┗ App.js

内容は以下のとおりです。

    
import { BrowserRouter, Routes, Route, Link } from "react-router-dom"

import HomePage from "./pages/HomePage";
import Page1Page from "./pages/Page1Page";
import Page2Page from "./pages/Page2Page";

function App() {

  return (

    <BrowserRouter>
      <div className="App">
        <Link to="/">ホーム</Link>
        <br />
        <Link to="/page1">ページ1</Link>
        <br />
        <Link to="/page2">ページ2</Link>
      </div>

      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/page1" element={<Page1Page />} />
        <Route path="/page2" element={<Page2Page />} />
      </Routes>
    </BrowserRouter>

  );
}

export default App;

画面遷移のルート（ルーティング）情報を記載します。

画面遷移先とパスをそれぞれ設定しました。

画面イメージ

確認のためdocker-compose upを使って各コンテナを起動します。

docker-compose.ymlファイルがある場所で以下のコマンドを実行します。

    
docker-compose up

画面遷移先とパスをそれぞれ設定しました。

起動したら以下のURLをブラウザに入力します。

http://localhost:3000

ホーム

ページ1

ページ2

まとめ

Reactで画面遷移の方法について紹介しました。

コメント

0 件のコメント:

コメントを投稿

コメントをお待ちしています。

このブログを検索