react-router の適用

react-router について

react-router を使用することで、ルーティングに対応することが出来ます。

react-router の適用

ここでは react-redux を使用しているアプリケーション をベースに react-router を適用します。

react-router-dom のインストール

react-router を使用するために、react-router-dom をインストールします。

npm install --save react-router-dom

<Route>の利用方法について

サンプル

src/components/index.js

import React, { Fragment } from 'react';
import { BrowserRouter, Route } from 'react-router-dom'
import { Provider } from "react-redux";
import HeaderComponent from "./header";
import TopComponent from './top'
import Counter from '../containers/counter'
import FooterComponent from "./footer";

export default class Index extends React.Component {
    render() {
        return (
            <Provider store={ this.props.store }>
                <Fragment>
                    <HeaderComponent/>
                    <BrowserRouter>
                        <Fragment>
                            <Route exact path='/' component={ TopComponent }/>
                            <Route exact path='/counter' component={ Counter }/>
                        </Fragment>
                    </BrowserRouter>
                    <FooterComponent/>
                </Fragment>
            </Provider>
        );
    }
}

<Route>について

<Route>を使用することで、ルーティングを定義することが出来ます。

<Route>の属性値について

pathに指定したパス、もしくは、その配下のパスへのリクエスト時にcomponentで定義されたコンポーネントが適用されます。
exactを指定することで、コンポーネントが適用されるケースをpathに指定したパスへのリクエスト時のみに限定することが出来ます。
つまり、exact path='/'のexactを指定しなかった場合、/counterへのリクエスト時にもTopComponent が適用されてしまいます。

<BrowserRouter>について

<BrowserRouter>を使用することにより、その中で<Route>が使用出来ます。
<BrowserRouter>の直下に使用出来る要素は1つのみです。
複数の<Route>を使用したい場合は、<Fragment>等、任意のタグ1つを挟むことで、その配下に複数の<Route>を使用することが可能になります。

<Link>について

サンプル

src/components/top.js

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

export default class TopComponent extends React.Component {
    render() {
        return (
            <div>
                <span>Top</span>
                <br />
                <Link to="/counter">counter</Link>
            </div>
        );
    }
}

<Link>を使用することで、HTMLの<a>タグのようにリンクを作成することができます。
toには遷移先を指定し、<Link>の中には、表示用文字列等を指定します。

ソースコード

GitHub

TODO

• react-router-redux
• redux-first-router