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>
    );
  }
}