React Router 4.1.1インポートなしで他のすべてのコンポーネントにヘッダコンポーネントを追加

Question

反応ルータのWebサイトhttps://reacttraining.com/react-routerからドキュメントを検索しようとしていますが、ネストされたルートを4.1.1で動作させるソリューションは見つからないようです。ルータに反応の古いバージョンではたとえば、あなたがそうのような巣のルートのことができるようになります

<Router history={history}> 
    <Route exact path="/" component={App}> 
     <Route path="/cards" component={Example} /> 
    </Route> 
</Router> 

これは{this.props.children}を使用し、それが簡単に静的コンポーネントを持つように作られた、このようなナビゲーションバーが存在するとして、すべてのコンポーネントでインポートする必要はありません。

class App extends Component { 
    render() { 
     return (
      <div> 
       <Header/> 
        <main>{ this.props.children }</main> 
       <Footer/> 
      </div> 
     ); 
    } 
} 

バージョン4.1.1と同様の動作をするにはどうすればよいですか。私は、コンポーネント内のヘッダコンポーネントを常にインポートしたくありません。

私は現時点で使用していますが、私がしようとしていることを達成していないようです。 V4で

<Router history={history}> 
     <Switch> 
      <Route exact path="/" component={App}> 
       <Route path="/cards" component={Example} /> 
      </Route> 
     </Switch> 
    </Router> 

Answer 1

<Route />は他と同様に普通の構成要素であるので、それは実際にははるかに簡単です。 props.childrenを使用する必要はなく、一致するコンポーネントをレンダリングする必要がある場所にルートを正確に配置することができます。以下は、あなたのv3の例に相当します：

<Router> 
    <div> 
    <Header /> 
    <main> 
     <Route exact path="/" component={HomePage} /> 
     <Route path="/cards" component={Example} /> 
    </main> 
    <Footer /> 
    </div> 
</Router> 

"index"パスを含む回答が更新されました。