はじめに
プログラミング歴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
の3つをインポート)
import { BrowserRouter, Route, Switch} from 'react-router-dom';
Routerの使い方
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>
について
<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関係について調べたらココに追記していきます。