为什么其他组件不在ReactJS中呈现布局内部？

我在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>
    );
  }
}

问题是，当我浏览链接时，它会在

页脚

之后呈现

存档

的内容：

NB:

我在存档页面

在页脚部分之后呈现

---

这里怎么了？我应该如何在布局内部渲染组件？

试试下面的方法

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

---

试试下面的方法

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

Remove style={{marginTop:'60px'}}在容器中，页面内容将上升。Remove style={{marginTop:'60px'}在容器中，页面内容将上升。

margin top

将整个页面移动，除了

navbar

在nav下方的60px。我的问题是

Footer

位于诸如archive之类的

组件内容之前。我想在布局内部渲染组件。好的，明白了。您可以将所有页面作为//页面根放在布局中。我有一个错误，即
您不应该使用和在同一路径中；将被忽略
页边距顶部
将整个页面移动到导航栏下方的60px处，导航栏除外。我的问题是
Footer
在
组件内容之前，比如归档文件。我想在布局内部渲染组件。好的，明白了。您可以将所有页面作为//页面根放在布局中。我有一个错误，即
您不应该使用和在同一路径中；将被忽略