爲什麼其他組件不能在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')); 

的問題是，當我通過鏈接導航，它呈現archive之後的內容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>