React <Router>でcomponentにpropsを渡す

recompose/withPropsを使うと、propsを渡せる

recomposeをインストール

yarn add recompose

記述

withPropsでpropsとcomponentを指定。

import withProps from 'recompose/withProps';

(componetクラス)
 
<Router>

  (...中略...)

     <Route exact path="/11" component={withProps(() => ({...this.props, foo:{xx:'111', yy:'222'}}))(PageTop)} />

  (...中略...)

</Router>

(...後略)

sample

class FooBar extends React.Component {

  render() {
    const pp = {  ...this.props,
                  foo:{
                    xx:'111',
                    yy:'222'  }
                }

    return (
      <Router>
         <div>
            <Switch>
              <Route exact path="/0" component={SomePage} />
              <Route exact path="/1" component={withProps(() => ({...this.props, foo:{xx:'111', yy:'222'}}))(SomePage)} />
              <Route exact path="/2" component={withProps(() => (pp))(SomePage)} />
            </Switch>
      </Router>
    )
  }
}

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-12-30 (日) 22:36:36 (86d)