为什么其他组件不会在ReactJS中的Layout内部呈现？

Question

我在React中有如下结构：

  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：

注意：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>