React : 라우터를 사용하여보기간에 상태를 어떻게 공유 할 수 있습니까?

Question

나는 반응 라우터를 사용하여 서로 독립적 인 두 개의보기로 라우팅합니다. 현재 Home 및 Backend에 새 상태 개체를 사용하고 있지만 둘 다 중첩 된 구성 요소가 포함되어 있기 때문에 제거하고 싶습니다.

class App extends Component { 
    render() { 
    return (
     <Router> 
      <div className="App"> 
      <Route exact={true} path="/" component={Home} /> 

      <Route path="/app/:user_id" component={Backend} /> 
      </div> 
     </Router> 
    ); 
    } 
} 

redux 또는 flux와 같은 다른 프레임 워크를 사용하지 않고 뷰간에 상태를 공유하는 방법은 무엇입니까?

Answer 1

'App'구성 요소로 상태를 들어 올린 다음 각 구성 요소가 소품을 통해 필요한 상태 요소를 모두 전달하십시오.

예를 들어 앱의 상태가 같을 수 있습니다

이

<Route path={"/"} component={() => <Home homeStuff={this.state.homeRelatedStuff} sharedStuff={this.state.sharedStuff}/>}/> 

* 목록의 약간 다른 방법을 참고 : 사용할 구성 요소를 선언 할 때 다음

App.state = { 
    homeRelatedStuff: {...}, 
    backendRelatedStuff: {...}, 
    sharedStuff: {...} 
} 

, 당신은 소품을 통과 구성 요소를 함수로 사용하여 소품을 전달할 수 있습니다.

상태는 별개로 유지할 필요가 없습니다. 아첨 할 수도 있고 여러 소품을 전달할 수도 있습니다. 각 구성 요소