반응 라우터가있는 자식이 아닌 구성 요소에 소품을 전달하려면 어떻게해야합니까?

Question

나는 수 없습니다 구성 요소를 가지고 전통적으로 부모 구성 요소에서 props 상속합니다.

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={ProfileList} /> 
     <Route path="/profile/:username" component={Single} /></Route> 
    </Router> 

소품이 ProfileList 구성 요소 및 해당 구성 요소에서 사용할 수 있습니다 :이 구성 요소는 노선과 부모에 의해 하지을 통해 렌더링,이 설정의 '디테일'구성 요소 인 <Single /> 구성 요소에 대해 이야기하고 렌더링 그래서 같은 Profile 구성 요소 :

/* ProfileList render method */ 
    render() { 
     return (
     <div> 
      {this.state.profiles.map((profile, i) => 
      <Profile {...this.state} key={i} index={i} data={profile} />)} 
     </div> 
    ); 
    } 

나는 ProfileList 및 Single 구성 요소 모두에서 Profile 구성 요소를 재사용하는 것을 시도하고있다 :

그래서 나는이 세부 사항을 볼 렌더링 방법이 없습니다 -

<Link className="button" to={`/profile/${username}`}> 
    {name.first} {name.last} 
    </Link> 

그러나 Single 구성 요소에 내가 state 또는 props 접근 방법이 없습니다. 나는 use redux for passing global state이거나 쿼리 매개 변수를 사용할 수 있음을 알고 있습니다. Link to=""

저는 아직 성과를 내기 위해 손을 내밀고 싶지 않으며 쿼리 매개 변수에 대해 느끼지 않습니다. 그렇다면 Single 구성 요소에 this.props.profiles과 같은 것을 어떻게 접근합니까?

Answer 1

redux connect()가 완전히 작업을 수행 할 수 있습니다. 나는 당신이 그것을 사용해야한다고 생각한다. 왜냐하면 "괜찮아"당신은 같은 redux 연결을 재 실시 할 것이기 때문이다