Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
39
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

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の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関係について調べたらココに追記していきます。

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
39
Help us understand the problem. What are the problem?