リアクタ - 外側のhtmlコンテナ

Question

私はリアクタの使い方を学んでいて、自分のルートをうまくセットアップできました。私はあなたがすべてのページに表示したい外側のhtmlコンテナ（これらのコンテナは、あなたがどのルートにいるかによってそれらの内部でレンダリングする異なるコンポーネントを持っている）を持つことに関して、質問があります。ここに私のコードは次のとおりです。

index.js：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import siteFeedback from './sections/comments/site-feedback'; 
import { BrowserRouter,Switch, Route } from 'react-router-dom'; 

ReactDOM.render(
<BrowserRouter> 
    <Switch> 
     <Route path='/site-feedback' component={siteFeedback}/> 
    </Switch> 
</BrowserRouter>, 
    document.getElementById('root') 
); 

siteFeedback.js

import React, {Component} from 'react'; 

class siteFeedback extends Component { 
    render() { 
     return (
      <div className="outer-container"> 

       {/* some other code and containers here */} 

      </div> 
     ) 
    } 
} 

export default siteFeedback; 

私は明瞭にするために、できるだけ多くの上に自分のコードを簡素化しました。 divの "outer-container"は、私が持っているすべてのルートをラップし、上の例では、ハードの上にsiteFeedbackのレンダリング機能でコード化しておきたいと思います。

外-container.js

import React, {Component} from 'react'; 

class outerContainer extends Component { 
    render() { 
     return (
      <div className="outer-container"> 
       {/* the componenets displayed in here would depend on what route you are on*/} 
      </div> 
     ) 
    } 
} 

export default outerContainer; 

しかし：

私が最初に考えたのは、「外側の容器」のdivはこのような何かを見ることができるコンポーネント自体に行われる必要があるということでした私が苦労している部分は、<div className="outer-container"> </div>の中に入っていなければならないコンポーネントです。これはあなたがどのページにいるかによって動的である必要があるので、何とか小道具としてこれを渡す必要がありますか？

私はその場所がルータからの小道具として渡されているのを見ます。 outer-container.jsのrender関数で、routeが/ siteFeedbackで、次に外部コンテナの内部にsiteFeedback componenetsをレンダリングするようなものを言うif文が必要ですか？ここでの最善のアプローチについてのアドバイスをお探し

、最も外側のURL

<Switch> 
    <Route path='/' component={outerContainer}/> 
    <Route path='/site-feedback' component={siteFeedback}/> 
</Switch> 

と動作するはず

return (
     <div className="outer-container"> 
      { this.props.children } 
     </div> 
) 

以下のようouterContainer変更にルートを追加歓声

Answer 1

。