React Routes 4 사이의 소품 전달 방법

Question

하나의 React Route Component에서 다른 React Route 구성 요소로 객체를 전송하는 방법을 찾을 수 없습니다.

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

과 같은 구성 요소 Home과 함께 : 예를 들어 는이 같은 컨테이너 라우터가

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, 우리는 일반적으로는 A ProductPage 구성 요소를 전달하려면 다음을 수행하십시오

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

당신이 원하는 소품을 사용하려면 원하는 소품과 함께 구성 요소를 반환하는 함수를 준비 할 수 있습니다. 여기에 나는 toggleSidebarOn 소품을 전달하기 위해 준비하고 있습니다 :

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

은 그럼 당신은 대신 구성 요소 소품의 <Route />의 render prop 사용합니다. 두 가지를 모두 사용하지 마시고 부품 소품을 사용하지 마십시오. 이로 인해 원하지 않는 다시 마운트가 발생하고 앱이 손상 될 수 있습니다 (예 : 사이드 바 애니메이션의 CSS 전환이 제대로 작동하지 않는 경우).

우리가 다음에 전달할 수는 MyProductPage을위한 소품을 렌더링하여 우리의 목표 경로에 소품 toggleSidebarOn :이 도움이

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

희망을!