他のコンポーネントがReactJSのレイアウト内でレンダリングされないのはなぜですか？

Question

私は以下のようで反応する構造を持っている：

client.js // routes are defined here and rendered app 

    components // a directory with all header, footer, layout, etc components 
    | 
    \____ Header.js 
    \____ Layout.js 
    \____ Nav.js 
    \____ Setting.js 

    index.html 

今私が持っているLayout.jsの内部：

import React from 'react'; 
import Footer from './Footer'; 
import Nav from './Nav'; 
import { Link, NavLink } from "react-router-dom"; 

export default class Layout extends React.Component { 
    constructor() { 
     super(); 
    } 
render() { 
    return (
    <div style={{textAlign: 'center'}}> 
     <Nav /> 
     <div className="container" style={{marginTop: '60px'}}> 
       {this.props.children} 
     </div> 
     <Footer /> 
     </div> 
    ); 
    } 
} 

私client.jsは以下の通りです：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Archive from './components/Archive.js'; 
import Layout from './components/Layout.js'; 
import Featured from './components/Featured.js'; 
import Setting from './components/Setting.js'; 
import { HashRouter, Route, Link } from 'react-router-dom'; 


ReactDOM.render(
     (<HashRouter> 
       <div> 
         <Route path="/" component={Layout} /> 
         <Route path="/archive/:aid?" component={Archive} /> 
         <Route path="/featured" component={Featured} /> 
         <Route path="/setting" component={Setting} /> 
       </div> 
     </HashRouter>), 
document.getElementById('app')); 

問題がときということです私はリンクをナビゲートして、の後の内容をレンダリングします。Footer：

NB：I'm in archive pageはフッターセクションの後にレンダリングされ、ここで何が問題である

？レイアウトの中にコンポーネントをレンダリングするにはどうすればよいですか？

Answer 1

以下のようなものを試してみて、

<Layout> 
    <Route path="/archive/:aid?" component={Archive} /> 
    <Route path="/featured" component={Featured} /> 
    <Route path="/setting" component={Setting} /> 
</Layout>