React Routes間で小道具を渡す方法

Question

React Route Componentから別のReact Route Componentにオブジェクトを送信する方法を見つけることができません。例えば 私はこのようなコンテナのルータがあります。このようなHomeコンポーネントで

const App =() => (
    <Router> 
    <div> 
     <Route exact path="/" component={Home} /> 
     <Route path="/sections/:id" 
      component={Section} /> 
    </div> 
    </Router> 
) 

を：

const Home =() => { 
    const Sections = tilesData.map((section, index) => (
     <div> 
     <img src={section.img} height="200" /><br/> 
     <Link to={`/sections/'${section.id}`} >Details for {section.author}</Link> 
     <hr/> 
     </div> 
    )) 
    return(
     <div> 
      {Sections} 
     </div> 
    ) 
} 

と、私は次のルートが<Link>をクリックしたときに、選択したオブジェクトを渡す方法を\ =理解していません。ここでは例の構成要素である：ここで

const Section = (props) => { 
    return(
     <div> 
      Section {props.title} 
      <img src={props.img} /> 
     </div> 
    ) 
} 

はコードの例です： https://codesandbox.io/s/Mv037AE3

Answer 1

に反応し、ルータv4に、我々は通常ProductPageコンポーネントに渡すために、次の操作を行います。

<Route path='/' component={ProductPage} /> 

がしたいです小道具を使用するには、目的の小道具を使用してコンポーネントを返す関数を準備することができます。ここで私はtoggleSidebarOn小道具を渡す準備をしています：

const MyProductPage = (props) => { 
    return (
    <ProductPage 
     toggleSidebarOn={this.toggleSidebarOn.bind(this)} 
     {...props} 
    /> 
); 
} 

次に、あなたが代わりにそのコンポーネントの小道具の<Route />のrender propを使用しています。両方を使用せず、コンポーネントの小道具を使用しないでください。望ましくない再取り付けが発生し、アプリが壊れる可能性があります（サイドバーアニメーションのCSSトランジションが正しく機能しなくなったなど）。

<Router> 
    <div> 
    <Switch> 
     <Route exact path="/products" render={MyProductPage} /> 
     <Route exact path="/perspectives" component={PerspectivePage}/> 
     <Route component={NotFound}/> 
    </Switch> 
    </div> 
</Router> 

・ホープ、このことができます：我々はその目標経路に当社toggleSidebarOn小道具に渡すことができますMyProductPageのためのレンダリング小道具を使用して

！