React Router v4 でルーティング先の component に Props を渡す方法

「React Router v4 でルーティング先の component に Props を渡す方法」について調査したので記事にします。

基本的なReact Router v4 の基本的なルーティング

React Router v4 の基本的なルーティングは次のような感じでコーディングします。

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

ReactDOM.render((
  <BrowserRouter>
    <AppFrame />
  </BrowserRouter>
  ),
  document.getElementById('root'),
);

class AppFrame extends Component {
  render() {
    return (
      <main>
        <Switch>
          <Route path='/login'   component={Login} />
          <Route path='/getbook' component={GetBooks} />
          <Route path='/addbook' component={Addbook} />
        </Switch>
      </main>
    );
  }
}

今回は “component={xxxx}” で起動する React component に props を渡す方法を考えます。

React component に props を渡す

変数を props として渡す方法

上記 /getbook の URI でルーティングされる GetBook component に、ある変数(ここでは書籍ID(bookID)とします) を props として渡したい!となった場合、、その時は、以下のように書くと良いでしょう。

class AppFrame extends Component {
  render() {
    this.bookId = 2;    // とりあえず仮に書籍ID = 2 と設定
    return (
      <main>
        <Switch>
          <Route path='/login' component={Login} />
          // GetBook component に、bookID を props として渡します 
          <Route
            path='/getbook'
            render={props => <GetBook bookId={this.bookId} {...props} />}
          />
          <Route path='/addbook' component={Addbook} />
        </Switch>
      </main>
    );
  }
}

“component” ではなく “render” を使うところがミソですね。

function を props として渡す方法

続いて、/login の URI でルーティングされる Login component に、認証処理を行う function auth() を props として渡たしたい!となったらどうするか?

同じく render を使用して渡してあげれば大丈夫です。

class AppFrame extends Component {
  auth(userInfo) {
    // 何かの認証処理
  }
  render() {
    return (
      <main>
        <Switch>
          // Login component に、認証処理を行う function auth() を props として渡します 
          <Route
              path='/login'
              render={props => <Login onSubmit={userinfo => this.auth(userinfo)} {...props} />}
          />
          <Route path='/getbook' component={GetBooks} />
          <Route path='/addbook' component={Addbook} />
        </Switch>
      </main>
    );
  }
}

参考となった情報

いろいろ調査しましたが、特に、下記の Github issue が参考になりました。様々なアプローチが議論されており見るだけで勉強になります。

github.com

まとめ?

最近、React Router が V4 になっていろいろ変わって大変だ!との嘆きを耳にしました。ですが、React 初心者である私は「へー」とか「ふーん」と実感も伴わずに聞き流していましたが、最近、実際にコードを書く段になって「大変」の意味がわかりました。

今回の調査もそうでしたが、とにかくまだ情報が少なく、あっても英語なことが多いので、どうしても時間がかかってしまします。また、v4に関する情報かどうかを見極めるのも(特に初心者は v2 や v3 の情報と混同しがち)以外に大変だったりしました。

ということで「英語は重要だ!」というまとめを以って終了です。