React and Material-UI : 여러 페이지로 구성된 애플리케이션을 구성하는 방법

Question

Meteor, React 및 Material-UI를 사용하여 앱을 만듭니다. 간단하게하기 위해 앱에 집과 사용자라는 두 페이지가 있다고 가정 해 보겠습니다.

두 페이지의 레이아웃이 같아야합니다. 왼쪽에는 햄버거 메뉴가 있고 오른쪽에는 IconMenu가있는 AppBar입니다. 햄버거 메뉴가 선택되면 서랍이 왼쪽에서 밖으로 밀려 나오고 오른쪽 메뉴가 선택되면 드롭 다운 메뉴가 나타납니다.

내 용도로 서랍 메뉴는 정적입니다. 즉, 표시되는 페이지 (집 또는 사용자)에 따라 메뉴 항목이 변경되지 않습니다. 그러나 오른쪽의 드롭 다운 메뉴는 활성화 된 페이지 즉, 상황에 맞는 페이지에 따라 변경됩니다.

제 질문은 : 건물을 짓는데 어떤 옵션이 있습니까?

두 가지 페이지 구성 요소를 만드는 것이 하나의 옵션이라고 생각합니다. 홈페이지 및 사용자 페이지를 작성하고 각각을 사용하여 작성하십시오. MyAppBar 및 MyDrawer, 특정 페이지에 포함되어야하는 내용 그런 다음 각 페이지는 드롭 다운 메뉴에서 메뉴 항목을 만들고이를 MyAppBar에 전달한 다음 전체 페이지를 렌더링합니다.

나는 이것이 문제를 해결할 것이라고 생각하지만, 더 좋은 방법이 있는지 확신 할 수 없다. 예를 들어 페이지의 컨텐트 구성 요소 만 업데이트하고 드롭 다운 메뉴의 항목에 대해 소유 구성 요소 (예 : ApplicationPage 구성 요소)가 컨텐트 구성 요소 (예 : HomeContent 또는 UserContent)를 쿼리 할 수있는 두 번째 방법이 있습니까? 콘텐츠 구성 요소가 변경되면 드롭 다운 메뉴를 설정 하시겠습니까? 다른 옵션은 없습니까?

/home 및/user에 대한 라우팅을 수행하기 위해 React Router를 사용하고 있으므로 위의 내용도 이에 맞아야합니다.

Answer 1

나는이 목적으로 반응 라우터를 사용합니다.

<Router history={browserHistory}> 
    <Route component={App}> 
     <Route path='/login/' components={{main: Login}} /> 
     <Route path='/confirm' 
       components={{ 
           main: Confirm, 
           sidebar:Sidebar 
          }} 
      /> 
    </Route> 
    </Router> 

템플릿 응용 프로그램에서 this.props.main 및 this.props.sidebar를 변수로 사용할 수 있습니다.

자세한 내용은 https://github.com/reactjs/react-router/blob/master/examples/sidebar/app.js 양식을 참조하십시오.