IT初学者部

プログラミングに関することを中心に、備忘録として残していきます。

react-router-domの導入手順

はじめに

react-router-domの導入手順について記載します。

そもそもreact-router-domって何をするものなの?って疑問についても含めて簡単に記載していこうと思います。

react-router-domの目的

reactプロジェクトはフロントエンド開発のライブラリ、フレームワークであるreactを利用したフロントエンド側のコンポーネントになります。

一般的な、従来のフロントエンド側というのはhtmlファイルで記載し、javascriptcssなどで要素の装飾や機能の作成などを付与していくというものでした。

htmlファイルについても、例えばトップページならtop.html、メニューならmenu.htmlのようにそれぞれのページごとにhtmlファイルを作成し、どのファイルを呼び出しているのかをjavaなどのサーバ側の呼び出し処理で行っていました。

しかしながら、htmlファイルを呼ぶためにいちいちサーバ側処理を実施するのは負担が大きくなって心舞うため、近年のwebフロント開発などではフロントエンド側の処理のみで対処できるものはそれだけを行い、必要な場合だけサーバ側呼び出しを実施するというのが一般的になりつつあります。

このとき、従来であればindex.htmlをはじめ各ページごとにhtmlファイルを作成、そしてhtmlファイルを呼び出すようにしていた部分を、javascriptで「index.htmlファイルの中身の描写を変更する」ようにしているのがルーティング処理の肝です。

これについては過去の記事で同じような内容を記載してあります。

hirm159.hatenablog.jp

VueだろうがAngularだろうがここのSPAの考えの部分は変わらないと思います。

もしも更に詳しく知りたいなどあれば自分でいろいろ調べてみてください。

導入手順

前置きはこの辺にして、導入手順を記載します。

プロジェクトのルートディレクトリを開き、以下のコマンドを実行してください。

npm i react-router-dom

インストール完了後、とりあえずルーティング処理を試してみましょう。

App.tsxを書き換えてみます。まずは書き換え前

(書き換え前)

import React from 'react';
import logo from './logo.svg';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'react-bootstrap';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <Button>test</Button>
      </header>
    </div>
  );
}

export default App;

(書き換え後)

import { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Top } from './pages/Top';
import { About } from './pages/About';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Routes>
          <Route path={"/"} element={<Top />} />
          <Route path={"/about"} element={<About />} />
        </Routes>
      </BrowserRouter>
    )
  }
}

export default App;

, で囲っている中のでルーティング時のパスと描写する要素を指定しています。

今回の記述の場合、/のページの場合はTopコンポーネントを、/aboutの場合はAboutコンポーネントを描写するようにしています。

ちなみに2つのコンポーネントの中身です。今回は表示内容が変更されていることを確認できれば良いので、以下のような記載にしています。

Top.tsx

import { Container, Row } from "react-bootstrap"

export const Top = () => {
    return (
        <Container>
            <Row>
                Top
            </Row>
        </Container>
    )
}

About.tsx

import { Container, Row } from "react-bootstrap"

export const About = () => {
    return (
        <Container>
            <Row>
                About
            </Row>
        </Container>
    )
}

この記載をしている状態で、ローカル上で起動し、アクセスしてみます。

http://localhost:3000/

Aboutへ移動してみます。

http://localhost:3000/about

パスで指定したコンポーネントの内容が表示されていることが確認できると思います。

おわりに

www.npmjs.com

v5.reactrouter.com

この辺のページを見ておくとより理解しやすいかもしれません。