Reactでの基本的なページ遷移の仕方について学ぶ

学んだこと

ルーティングの基礎

• ReactRouter を使用し、ルーティングの基礎を学ぶ

StackBlitz での環境整備

• React プロジェクトを作成し、react-router-domをインストールする。

注意

• 前提として、StackBlitz の React プロジェクト作成後の環境では動作できない。必要なライブラリのインストールやライブラリのバージョンをダウングレードする必要がある。

  • ReactRouter バージョン5.2.0をインストールする。
    • npm install react-router-dom@5.2.0
  • ReactRouter のバージョンに伴い、React と React-dom をダウングレードする必要がある。
    • npm install -save react@17.0.1 react-dom@17.0.1

• 上記対応後、main.jsxのエラーを潰す。

  • エラーを潰す為下記のコードに置き換える。

import React from "react";
import ReactDom from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDom.render(<App />, rootElement);

基本的なページの遷移

• App.jsx
  • ルーティング設定時に exact を適宜付ける必要がある。
    • 下記のコードの場合 exact を付けないと、ルート配下の場合はすべて Home に遷移してしまう。

// ページ遷移で必要になるライブラリ
import { BrowserRouter, Link, Switch, Route } from 'react-router-dom';

import './App.css';
import { Home } from './Home';
import { Page1 } from './Page1';
import { Page2 } from './Page2';

export default function App() {
  return (
    <BrowserRouter>
      <div className="App">
        // リンク一覧
        <Link to="/"> Home </Link>
        <br />
        <Link to="/page1">Page1</Link>
        <br />
        <Link to="/page2">Page2</Link>
      </div>
      // ルーティング設定
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/page1">
          <Page1 />
        </Route>
        <Route path="/page2">
          <Page2 />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

• Home.jsx

export const Home = () => {
  return (
    <div>
      <h1>Homeページです</h1>
    </div>
  );
};

• Page1.jsx

export const Page1 = () => {
  return (
    <div>
      <h1>Page1ページです。</h1>
    </div>
  );
};

• Page2.jsx

export const Page2 = () => {
  return (
    <div>
      <h1>Page2ページです。</h1>
    </div>
  );
};