Help us understand the problem. What is going on with this article?

React Router v4を使う

More than 1 year has passed since last update.

目次

  • ルーティングの概念
  • 基本的なルーティング
  • 少し応用

React Router v4
https://reacttraining.com/react-router/

ルーティングの概念

普通のHTMLではaタグで使ってその際に別ページのHTML、CSS、JSのファイルを取ってくる為のリクエストとレスポンスが走ります。
image.png

しかしSPA(シングルページアプリケーション)場合はそうではありません。
Webpackと呼ばれるモジュールバンドラでプロジェクト内で使われている全てのコンポーネントを一つのJSファイルに書き出します。(設定は色々できます。)

image.png

Reactアプリをみてみます。
image.png
ただh1の文字にReactロゴのSVGだけのページです。
ソースは見ると、、

image.png

どこにもh1もReactLogoのSVGもないですよね。

次に、./static/js/bundle.jsをみてみます。
image.png
すると中に何万行もの記述があり、写真の38362行目に'React Router\u3092\u899A\u3048\u308B'ってありますね。
これが日本語がユニコードで変換されており、38353行目にcreateElement(
'h1'~,
とあります。

もう分かりましたよね?
ReactではWebpackによってまとめられた1つのJSファイルをの中から必要な要素をJavascriptで動的に生成しています。
もちろんページごとに1つづつ作られる訳ではなくプロジェクトで1つのjsファイルでWebpackから吐き出されます。

なので、ルーティングでページが変わった時は、リクエスト、レスポンスは走らずJSで動的にDOM要素を生成します。
しかもその際に前にお話しした仮装DOMで差分を測って差分のみを更新する訳です。
速い訳ですよね。。

基本的なルーティング

コード自体は単純でそんなに難しくないと思います。

まずはreact-routerのインストール
npm install -S react-router-dom

色々な書き方がありますが、個人的に好きな書き方で書きます。

srcディレクトリの中にルーティングを定義するだけのコンポーネント、Routing.jsを作成します。

Routing.js
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './App';

class Routing extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={App} />
        </Switch>
      </BrowserRouter>
    )
  }
}

export default Routing;

これをindex.jsで呼び出します。

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import Routing from './Routing';

ReactDOM.render(<Routing />,document.getElementById('root'));
registerServiceWorker();

すると最初と同じ画面が出ます。
このまま続きます。
別ページAbout.jsを作ります。

About.js
import React from 'react';
import { Link } from 'react-router-dom';

const About = () => (
  <div>
    <h1>About</h1>
    <p>Aboutページです</p>
    <Link to="/">Homeへ戻る</Link>
  </div>
)

export default About;

Routing.jsで読み込みます

Routing.js
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import App from './App';
import About from './About';


class Routing extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={App} />
          <Route exact path="/about" component={About} />
        </Switch>
      </BrowserRouter>
    )
  }
}

export default Routing;


App.js修正します

App.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';


class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>React Routerを覚える</h1>
        <img src={logo} className="App-logo" alt="logo" />
        <div>
          <Link to="/about">About</Link>
        </div>
      </div>
    );
  }
}

export default App;

これでブラウザを開くと無事リンクが通ってます。

解説

<BrowserRouter>
React Router使いますよ。って宣言的なものだと思ってください。
React Router使うときのお約束です。
1プロジェクトに1回だけ使います。
これを通すと子要素にpathの情報やページ遷移に使う関数などが渡されていきます。

<Switch>
これが口だと言いづらいのですが、まぁ最初はおまじないとして、Routeを使うときには外で囲んであげてください。

<Route>
pathに合わせてコンポーネントを入れ替えてくれます。
exactは全体一致、つけないとpath以降は先頭一致になります。

<Link>
リンク遷移したい時はaタグは使わず、このタグを使います。
toに遷移したい先を書く。

少し応用

疲れたので今度描きます笑

kosuke0820
Frontend Developer / Vue / React
hey-inc
インターネットビジネスの企画・開発・運営
https://hey.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away