React Router は、React でのシングルページアプリケーションの開発に必要なスキルです。V4 以降、多くのコア API が書き直され、ルーティングはコンポーネントとして実装されました。この記事は、私が React Router V4 を学んできた内容のまとめです。
イントロダクション#
React-Router V4 は、react-router の大規模なアップデートです。多くのコア API が変更され、react-router4 ではルーティングの集中設定は必要ありません。react-router 4 のコアは、すべてがコンポーネントであるという概念です。
react-router 4 は、react-router、react-router-dom、react-router-native の 3 つのパッケージに分割されています。react-router は React Router のコアルーティング機能を提供しますが、直接使用することはありません。react-router-dom と react-router-native は、特定の実行環境でのルーティングコンポーネントを提供します。Web アプリケーションをブラウザで開発する場合は、react-router-dom をインストールする必要があります。同様に、React Native アプリケーションを開発する場合は、react-router-native をインストールする必要があります。これらの両方は、依存関係として react-router をインストールします。
react-router-dom#
react-router は、ブラウザ側のルーティングに react-router-dom を使用し、BrowserRouter、Route、Link などの API を提供します。Web 開発では、主に react-router-dom を使用します。この記事の議論も react-router-dom に限定されます。
インストール
npm install react-router-dom --save
使用法#
Router#
react-router4 の使用には、まず Router を選択する必要があります。Router はアプリケーションの最上位にラップするために使用されます。Router には 2 つのタイプがあります：HashRouter と BrowserRouter で、それぞれ異なる動作をします。
HashRouter と BrowserRouter#
HashRouter と BrowserRouter を見分ける最も簡単な方法は、HashRouter の URL に「#」が含まれていることです。例えば、localhost:3000/# のような URL です。HashRouter は、ハッシュ値を使用してルーティングを制御します。HashRouter を使用すると、デフォルトで URL に「#」が含まれます。
BrowserRouter の URL には「#」が含まれていません。URL はhttp://localhost:3001/user/login のようになります。BrowserRouter の原理は、HTML5 の history API に依存してルーティングメカニズムを実現しています。
HashRouter と BrowserRouter の両方には、basename 属性があります。URL がウェブサイトのルートディレクトリではなく、サブディレクトリにある場合は、この属性を設定する必要があります。以下の例を参考にしてください。
<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // レンダリングされるリンクは <a href="/calendar/today"> となります
Route#
Route は Router の子要素であり、パスに対応するコンポーネントの表示を制御します。よく使用される属性には、exact、path、component があります。
以下のコードを考えてみましょう。
<Route path="/" exact component={HomePage} />
<Route path="/users" component={UsersPage} />
react-router4 のルーティングは包括的です。複数の Route が同時にマッチングとレンダリングを行うことができます。exact 属性は、パスのマッチングが成功した場合にさらなるマッチングを行わないように制御します。上記のコードでは、パスに基づいて HomePage または UsersPage をレンダリングしようとしています。exact 属性を削除すると、ブラウザで /users にアクセスした場合、HomePage と UsersPage コンポーネントが同時にレンダリングされます。
Switch#
Router コンポーネント内の任意の位置に複数のを作成できますが、通常は同じ位置に配置します。一連のをコンポーネントで囲むことで、は自身の子要素（つまりルート）を反復処理し、現在のパスに一致する最初の要素をレンダリングします。以下のコードを考えてみましょう。
<Switch>
<Route exact path="/" component={DashBoard} />
<Route path="/user" component={User} />
</Switch>
Switch コンポーネントを削除すると、/user にアクセスした場合、ルートは「/」と「/user」の両方に一致し、DashBoard と User コンポーネントが同時にレンダリングされます。
Link vs NavLink#
react-router4 では、ページの切り替えに使用する 2 つのナビゲーション API が提供されています。ページが切り替わるとき、ページは再読み込みされませんが、コンポーネントは再レンダリングされます。これらの機能は同じですが、NavLink は URL が一致した場合に追加のスタイル機能を提供します。
Link
Link は to 属性を提供し、ジャンプ先のアドレスを指定します。文字列またはオブジェクトを渡すことができます。以下の例を参考にしてください。
<Link to="/courses"/>to: object
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}}/>
NavLink
NavLink は、現在の URL に一致したリンクに className クラス名を指定できます。タブナビゲーションなどでよく使用されます。
<nav>
<NavLinkto="/app"exact activeClassName="active">Home</NavLink>
<NavLinkto="/app/users"activeClassName="active">Users</NavLink>
<NavLinkto="/app/products"activeClassName="active">Products</NavLink>
</nav>
パスパラメータ#
react router4 では、match を使用してパス上のパラメータを取得します。match は、でコンポーネントに渡される props であり、react コンポーネント内部で this.props.match を使用して match のプロパティにアクセスします。以下のコードを考えてみましょう。
<Switch>
<Route exact path="/" component={DashBoard} />
<Route path="/user/:id" component={User} />
<Route path="/user" component={User} />
</Switch>
http://localhost:3001/user/123 にアクセスした場合、this.props.match の内容を出力します。match から取得できるプロパティは次のとおりです。
そして、this.props.match.params.id を使用してルートの一致した id を取得できます。
withRouter#
もしもコンポーネントがでレンダリングされていない場合、history、match、location などの props をどのように取得するのでしょうか？react router4 では、withRouter という高階コンポーネントを提供しています。以下の方法で使用します。
import { withRouter } from 'react-router-dom';
withRouter を使用するには 2 つの方法があります。最初の方法は、デコレータを使用する方法です。以下のように使用します。
@withRouter
class AuthRoute extends React.Component {
}
もう一つの方法は、元のコンポーネントを withRouter でラップし、新しいコンポーネントを返す方法です。
class Auth extends React.Component {
}
const AuthRoute = withRouter(Auth)
上記の 2 つの方法を使用すると、コンポーネント内でルーティングの props を使用することができます。以下のようになります。
const { match，location，history} = this.props;
結論#
react router4 については、この記事では一部の一般的な API と使用法について説明しましたが、学ぶべきことはまだまだあります。これは始まりに過ぎません。