Reactルーターの紹介

React Router 4は、URLとReactアプリをリンクするのに最適なツールです。 React Routerは事実上のReactルーティングライブラリであり、Reactの上に構築された最も人気のあるプロジェクトの1つです。

このチュートリアルでは、最後の安定バージョンであるReact Router4を紹介します。

React Routerは事実上のReactルーティングライブラリであり、Reactの上に構築された最も人気のあるプロジェクトの1つです。

Reactのコアは非常に単純なライブラリであり、ルーティングについては何も指示しません。

シングルページアプリケーションでのルーティングは、リンクを介してアプリをナビゲートするためのいくつかの機能を導入する方法です。期待される通常のWebアプリケーションの場合:

  1. ブラウザはURLを変更する別の画面に移動したとき
  2. ディープリンク動作するはずです:ブラウザでURLを指定すると、アプリケーションはURLが生成されたときに表示されたのと同じビューを再構築する必要があります。
  3. ザ・ブラウザの戻る(および進む)ボタン期待どおりに動作するはずです。

ルーティングは、アプリケーションのナビゲーションとブラウザが提供するナビゲーション機能をリンクしますアドレスバーそしてそのナビゲーションボタン

Reactルーターはあなたのコードを書く方法を提供しますルートが定義したものと一致する場合にのみ、アプリの特定のコンポーネントが表示されます

インストール

npm

npm install react-router-dom

ルートの種類

Reactルーターは2つの異なる種類のルートを提供します:

  • BrowserRouter
  • HashRouter

1つはクラシックURLを構築し、もう1つはハッシュを使用してURLを構築します。

https://application.com/dashboard   /* BrowserRouter */
https://application.com/#/dashboard /* HashRouter    */

どちらを使用するかは、主にサポートする必要のあるブラウザによって決まります。BrowserRouterを使用します履歴API、これは比較的最近のものであり、IE9以下ではサポートされていません。古いブラウザについて心配する必要がない場合は、それが推奨される選択です。

コンポーネント

Reactルーターを使用するときに最も対話する3つのコンポーネントは次のとおりです。

  • BrowserRouter、通常は別名Router
  • Link
  • Route

BrowserRouterすべてのRouteコンポーネントをラップします。

Linkコンポーネントは、ご想像のとおり、ルートへのリンクを生成するために使用されます

Routeコンポーネントは、それらに含まれるコンポーネントを表示または非表示にする責任があります。

BrowserRouter

これは、BrowserRouterコンポーネントの簡単な例です。それをreact-router-domからインポートし、それを使用してすべてのアプリをラップします。

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render( <Router> <div> <!– –> </div> </Router>, document.getElementById(‘app’) )

BrowserRouterコンポーネントは子要素を1つしか持つことができないため、追加するすべてをラップします。div素子。

リンクコンポーネントは、新しいルートをトリガーするために使用されます。からインポートしますreact-router-dom、およびリンクコンポーネントを追加して、さまざまなルートを指すことができます。to属性:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link } from 'react-router-dom'

ReactDOM.render( <Router> <div> <aside> <Link to={/dashboard}>Dashboard</Link> <Link to={/about}>About</Link> </aside> <!– –> </div> </Router>, document.getElementById(‘app’) )

ルート

次に、上記のスニペットにRouteコンポーネントを追加して、実際に希望どおりに機能するようにします。

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

const Dashboard = () => ( <div> <h2>Dashboard</h2></div> )

const About = () => ( <div> <h2>About</h2></div> )

ReactDOM.render( <Router> <div> <aside> <Link to={/}>Dashboard</Link> <Link to={/about}>About</Link> </aside>

  <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">main</span><span style="color:#f92672">&gt;</span>
    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Route</span> <span style="color:#a6e22e">exact</span> <span style="color:#a6e22e">path</span><span style="color:#f92672">=</span><span style="color:#e6db74">'/'</span> <span style="color:#a6e22e">component</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">Dashboard</span>} <span style="color:#f92672">/&gt;</span>
    <span style="color:#f92672">&lt;</span><span style="color:#a6e22e">Route</span> <span style="color:#a6e22e">path</span><span style="color:#f92672">=</span><span style="color:#e6db74">'/about'</span> <span style="color:#a6e22e">component</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">About</span>} <span style="color:#f92672">/&gt;</span>
  <span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/main&gt;</span>
<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/div&gt;</span>

</Router>, document.getElementById(‘app’) )

グリッチでこの例を確認してください。https://glitch.com/edit/#!/flaviocopes-react-router-v4/

ルートが一致するとき/、アプリケーションはダッシュボード成分。

「About」リンクをクリックしてルートを変更した場合/about、ダッシュボードコンポーネントが削除され、コンポーネントがDOMに挿入されます。

に注意してくださいexact属性。これがなければ、path="/"も一致します/about、以来/ルートに含まれています。

複数のパスに一致

正規表現を使用して、ルートを複数のパスに応答させることができます。path正規表現文字列にすることができます:

<Route path='/(about|who)/' component={Dashboard} />

インラインレンダリング

指定する代わりにcomponent上のプロパティRoute、設定できますrender小道具:

<Route
  path='/(about|who)/'
  render={() => (
    <div>
      <h2>About</h2>
      ...
    </div>
  )}
/>

動的ルートパラメータに一致

次のような静的ルートの使用方法はすでに見ました

const Posts = () => (
  <div>
    <h2>Posts</h2>
    ...
  </div>
)

//… <Route exact path="/posts" component={Posts} />

動的ルートを処理する方法は次のとおりです。

const Post = ({match}) => (
  <div>
    <h2>Post #{match.params.id}</h2>
    ...
  </div>
)

//… <Route exact path="/post/:id" component={Post} />

ルートコンポーネントでは、動的パラメータを検索できます。match.params

matchインラインレンダリングされたルートでも使用できます。これは、この場合に特に役立ちます。idPostをレンダリングする前にデータソース内の投稿データを検索するパラメータ:

const posts = [
  { id: 1, title: 'First', content: 'Hello world!' },
  { id: 2, title: 'Second', content: 'Hello again!' }
]

const Post = ({post}) => ( <div> <h2>{post.title}</h2> {post.content} </div> )

//… <Route exact path="/post/:id" render={({match}) => ( <Post post={posts.find(p => p.id === match.params.id)} /> )} />

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: