为什么其他组件不能在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>