はじめてのReact #23 「ルーティングに対応する」基本編 react-router@v5

  • このエントリーをはてなブックマークに追加
  • LINEで送る

React Routerは雑に言うとリクエストされたURLのパスと、ReactのComponentを紐付けてくれる便利なモジュールです。

例えば /foo にアクセスされたら FooComponentを、/barにアクセスされたらBarComponentを実行することができるようになります。
[blogcard url=”https://reacttraining.com/react-router/”%5D

今回は3月21日に登場したばかりのReact Router v5を触ってみます。本来はv4.4として出す予定だったそうですがReact 16との互換性が大きく改善されたとのことでメジャーバージョンアップの運びとなったとのこと。使い方もv4系とあまり変わらないようですね。

- Sponsored Link -

名産品図鑑アプリを作る

都道府県別に名産品を表示する簡単なWebアプリを作ってみます。内容としては公式サイトのサンプルの見た目をいじっただけの物です。

実行結果

以下から実際に動かせます。面倒だったので埼玉と島根だけですがw
[blogcard url=”https://s3-us-west-2.amazonaws.com/blog.katsubemakito.net/static/react1st/23/index.html”%5D

Reactプロジェクトの準備

create-react-appコマンドでReactの新規プロジェクトを作成します。セットアップ方法など詳しくは過去の記事を参照ください。

$ create-react-app picbook

その後、Webサイト向けのreact-routerモジュールを追加します。

$ cd picbook
$ npm install react-router-dom

ソースコード

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './App.css';

class App extends Component {
  render() {
    return (
      <Router>
        <div className={"container"}>
          {/* ナビゲーション */}
          <ul className={"gnavi"}>
            <li><Link to="/">名産品図鑑</Link></li>
            <li>┣ <Link to="/saitama">埼玉県</Link></li>
            <li>┗ <Link to="/shimane">島根県</Link></li>
          </ul>

          {/* ここから下が実際のコンテンツに置き換わる */}
          <Route exact path="/" component={Home} />
          <Route path="/saitama" component={Saitama} />
          <Route path="/shimane" component={Shimane} />
        </div>
      </Router>
    );
  }
}

/**
 * トップページ
 */
function Home() {
  return (
    <div className={"item"}>
      <h2>名産品図鑑</h2>
      <ul>
        <li><Link to="/saitama">埼玉県<br /><img src="/image/saitama.png" /></Link></li>
        <li><Link to="/shimane">島根県<br /><img src="/image/shimane.png" /></Link></li>
      </ul>
    </div>
  );
}

/**
 * 埼玉県
 */
function Saitama() {
  return (
    <div className={"item"}>
      <h2>埼玉県の名産品</h2>
      <img src="/image/saitama.png" />
      <ol>
        <li>十万石まんじゅう</li>
        <li>深谷ねぎ</li>
        <li>草加せんべい</li>
        <li>いも</li>
      </ol>
    </div>
  );
}

/**
 * 島根県
 */
function Shimane() {
  return (
    <div className={"item"}>
      <h2>島根県の名産品</h2>
      <img src="/image/shimane.png" />
      <ol>
        <li>しじみ</li>
        <li>あご野焼</li>
        <li>出雲そば</li>
        <li>ぶどう</li>
      </ol>
    </div>
  );
}

export default App;

App.css

a:hover{
  color: red;
}
ul{
  list-style: none;
}

.container{
  display: inline-flex;  /* 横に並べる */
}
.gnavi{
  order: 1;
  width: 80px;
  height: 500px;
  padding: 10px;
  margin-right: 10px;
  background-color: skyblue;
}
.item{
  order: 2;
}

解説

ルーティングの設定

余計な部分はカットしていますが、以下の箇所でURLとComponentの関連付けを行っています。

<Router>
  <Route exact path="/" component={Home} />
  <Route path="/saitama" component={Saitama} />
  <Route path="/shimane" component={Shimane} />
</Router>

/saitamaにアクセスすれば、このコードで言えばfunction Saitama(){}が実行され、実行結果が<Route>を書いた場所に表示されます。

exact属性はlocation.pathnameと完全にマッチした場合にのみ実行されます。
例えば /foo#hogeのようにアンカーの指定があったり、/bar?a=1といったクエリーが付いている場合は実行されません。

SPA的に移動する

このアプリ内で埼玉県のページを表示するには <a href="/saitama">埼玉県</a> といったようにAタグを書いても移動はできますが、ページ全体を書き換えることになってしまいます。せっかくReactを利用しているのですから、SPA的に最小限の書き換えで済ませたいところ。

そんなときに利用するのがReactRouterから提供されている<Link>タグです。

<Link to="/saitama">埼玉県</Link>

これだけで/saitamaのルーティングが別の箇所で定義されていればSPA的な挙動になります。

またテキストだけではなく<img>などで画像を対象とすることも可能です。

<Link to="/shimane">島根県<br /><img src="/image/shimane.png" /></Link>

ベースのパスを指定したい

<Router>basename属性を指定すると、HTMLで言う<base href="/public">のような効果になります。

<Router basename="/public/">
<Link to="/saitama">埼玉県</Link>

この場合は最終的に<a href="/public/saitama">埼玉県</a>とレンダリングされます。ドキュメントルート直下ではなく、何らかのディレクトリの下に置きたい場合などはこちらのオプションを利用することで解決できます。

続き

[blogcard url=”https://blog.katsubemakito.net/react/react1st-24-router2″%5D

参考ページ

- Sponsored Link -

同じカテゴリの記事

Donate

投げ銭お待ちしております!

BTC3A9nH1j7qQdKrSTrmnEdweo6zPqpHBmkxC
ETH0x1aE0541198D1F9f2908a25C35032A473e74D3731
XPXaQ9zv65F9ovfoMBrFGiPRG47aSHFhy8SX
MONAMTKgzSiS5BDueZkRCHySih24TGFwHThaDQ (MonaCoin)
ZNYZhnpf4RFYVQTAQiyoJg9dGoeC4bgT3BoSy (BitZeny)

ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください