2022/08/12 

はじめてのReact – ページ切り替えの基本を試してみた

Reactの環境をWindowsに構築したので、早速プログラミングしてみようと思います。
最初に何をやろうかと考えたのですが、一般的なWeページの基本のページ遷移をまずやってみました。
なお、本記事は、ある程度、HTML/JavaScriptの知識があることを前提として書きました。
ReactをWindowsにインストールしていない方は、こちらの記事を参考にしてください。

Reactのインストール

基本ページ作成

ページ遷移を試すにあたって、以下のようなに、デフォルトのApp.tsxを書き換えました。
<Page1 />...</Page2>のところで、関数を呼び出してます。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    /* 以下の記述で Page1,2,3を呼び出す */
    <>
        <Page1 />
        <Page2 />
        <Page3 />
    </>
  );
}

function Page1() {
  return <h2>Page1</h2>;
}

function Page2() {
  return <h2>Page2</h2>;
}

function Page3() {
  return <h2>Page3</h2>;
}

export default App;

このプログラムを実行すると、以下のようになります。

(一応、h2をcssでデザインしてます。)

見て分かりますが、これだとただ、Page1,2,3と連続で表示しているだけ、やりたいのではページ遷移なので、さてどうするか。。

install-routerをインストールする

ReactはSPA(シングルページアプリケーション)なので、ページ遷移はしないです。私も最初、このことが理解できませんでしたが、ググっていろいろな記事を見てようやくわかってきました。
従って、ページ遷移しているように見せるやり方があります。そのためには、新たにインストールするパッケージがあります。それは、「install-router-dom」です。
以下にインストールコマンドを記載します。

ここでバージョンを確認します。

install-router-domを使用したページ遷移

ページ遷移をするために、以下の様に記述を変えました。
<BrowserRouter><Routes>で囲み、Route pathでページ遷移のパスを指定し、elementで関数を呼んでます。
なお、この記述は、install-router-domのバージョン6以上の記述です。それより以前のバージョンで記述が違うので注意願います。

import React from 'react';
import Main from './Main';
import './App.css';

import { Route, BrowserRouter, Link, Routes, useRoutes  } from 'react-router-dom';

function App() {
  return (
    <>  
      <BrowserRouter>
          <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/page1" element={<Page1 />} />
          <Route path="/page2" element={<Page2 />} />
          <Route path="/page3" element={<Page3 />} />
          </Routes>
      </BrowserRouter>
    </>
  )
}

function Home() {
  return <h2>Home</h2>;
}

function Page1() {
  return <h2>Page1</h2>;
}

function Page2() {
  return <h2>Page2</h2>;
}

function Page3() {
  return <h2>Page3</h2>;
}

export default App;

実行結果

上記、記述に変えた結果、以下の様になりました。
URLをhttp://localhost:3000/page1を指定すると、Page1のみ表示してますね。


コメントを書き込む

メールアドレスが公開されることはありません。


カテゴリ



プロフィール

運営者 HONDA

福島県出身、在住

広告

このブログで契約しているレンタルサーバです。