React Router の使い方

はじめに

プログラミング歴2ヶ月の素人が書いています。（間違っていたらご指摘ください）

WesBos.com のオンラインビデオコースでReactを学習しています。
動画は以下から。
https://reactforbeginners.com/

「React Router」についての学習メモです。

そもそもRouterとは

Reactに限らず、webページは『クライアントサイドからのURLリクエスト』と、『サーバーがそれに答えるレスポンス』によって成り立っている。

　＝＝URLリクエスト＝＝　 < このページくれ )
　　　　↓　　↑
＝＝サーバからのレスポンス＝＝　< おっけ〜 )

どのURLが、どのリクエストに紐づいているのかを設定するのが、Routerの役目です。

React Routerについて

以下コマンドでインストールできます。

• ウェブで開発する場合はreact-router-domを、

• アプリで開発する場合はreact-router-nativeを使います。

$ npm install -S react-router-dom

また、以下のようにimportして使います。
（BrowserRouter, Route, Switchの３つをインポート）

import { BrowserRouter, Route, Switch} from 'react-router-dom';

Routerの使い方

Router.js

const Router = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={StorePicker} />
            <Route path="/store/:storeID" component={App} />
            <Route component={NotFound} />
        </Switch>
    </BrowserRouter>
);

<BrowserRouter>について

React Routerは<BrowserRouter>か<HashRouter>というコンポーネントを使います。
前者はHTML5のhistory APIを使っており、後者はwindow.locationを利用しています。
古いブラウザもサポートしなければならない場合は、後者を利用する必要があります。

前者のhistoryオブジェクトはルーティング先のコンポーネントでpropsとして受け取ることができます。

<Switch>について

<Switch>内にルーティングを記述することで、urlにマッチされた最初のルーティングだけがレンダリングされます。（これを「Exclusive(排他的)」という）

仮に<Switch>が無かった場合、一致するすぺてがレンダリングされてしまう。

<Route>について

Router.js

<Route exact path="/" component={StorePicker} />

• path="URL"　：リクエストURLです（ルートからのパス）

• exact path="URL" :完全一致させるとき

• component={コンポーネント名}　：　URLがマッチしたときにレンダリングするコンポーネントです

• パスを指定しない場合　：　404 Page Not Found に利用されます

historyプロパティについて

Routerに紐づけられたコンポーネントには、historyというプロパティが自動的に付与されます。

ブラウザの検証ツールでも確認できます。いくつかのメソッドが組み込まれていることがわかります。

historyオブジェクトはルーティング先のコンポーネントでpropsとして受け取ることができます。

props.history.push()メソッドについて

子コンポーネントからルーティングにアクセスしたいときに使います。

props.history.push(`/store/123`); //引数はルートからのパス

まとめ

React Routerについてまとめました。
今後もRouter関係について調べたらココに追記していきます。