react-router v4のあれこれ

React用ルーティングライブラリ
github.com

React単体だと、URLとアプリの描画状態が紐付いていない。
ルーティングライブラリを導入すると、、
・特定URLを打ち込むと、特定の画面に遷移
・特定の画面状態を、URLに反映
が、できるようになる💁‍♂️

web向けに導入する際はreact-router-domを入れる

$ npm i react-router-dom

基本的な使い方

BrowserRouter内にRouteを配置すると、URLに合わせて表示コンポーネントを変えてくれる。pathは前方一致なので、'/'にはexactを指定する（でないと'/about'も'/categories'もHomeが表示されてしまう）。
Linkを使って画面遷移（URL更新含む）ができる。

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to='/'>Home</Link></li>
        <li><Link to='/about'>About</Link></li>
        <li><Link to='/categories'>Categories</Link></li>
      </ul>
      <Route exact path='/' component={Home} />
      <Route path='/about' component={About} />
      <Route path='/categories' component={Categories} />
    </div>
  </BrowserRouter>
)

urlのパスにidを含めて特定のページを表示させたい時はこんな感じ。
Routeは自動的にpropsを受け取るので、そこから指定されたidを取得することができる。

<Route exact path='/categories' component={Categories} />
<Route path='/categories/:id' component={Category} />

...

const Category = props => {
  const { id } = props.match.params;
  return (
    <div>Category number is '{id}'.</div>
  );
}

ちなみに自動でセットされるpropsとは別にデータを渡したい時は、こんな感じに記述する

<Route path='/categories/:id' render={props => <Category match={props.match} state={this.state} />} />

...

const Category = props => {
  const { id } = props.match.params;
  const { color } = props.state;

参考

qiita.com