62
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

React Router の使い方

Last updated at Posted at 2019-08-12

はじめに

プログラミング歴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の使い方

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というプロパティが自動的に付与されます。

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

スクリーンショット 2019-08-12 23.18.24.png

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

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

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

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

まとめ

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

62
45
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
62
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?