Javascript 页脚组件在路由器4和布局中的位置错误

我使用react router 4.3.1与react当然，我已经创建了一个布局组件，我的不同内容组件呈现ok（this.props.Children），但我似乎无法成功地将页脚组件放置在所有布局的底部，即使它位于新的div中并且“超出”所有逻辑，“我的页脚”组件是自上而下的第三个表单，底部是内容。我已经为此奋斗了好几个星期，但运气不佳，这是我的代码

路由组件-

import React from 'react';
import { Switch, BrowserRouter, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './components/Home';
import Whoweare from './components/Whoweare';
import Services from './components/Services';
import Contact from './components/Contact';
import Errornotfound from './components/Errornotfound';

export default function Routes() {

    return (
        <BrowserRouter>
            <div>
                <Route component={ Layout }/>
                <Switch>
                    <Route exact path='/' component={ Home } />
                    <Route path='/whoweare' component={ Whoweare } />
                    <Route path='/services' component={ Services } />
                    <Route path='/contact' component={ Contact } />
                    <Route component={ Errornotfound } />
                </Switch>
            </div>
        </BrowserRouter>
    );
}

从“React”导入React；
从“react router dom”导入{Switch，BrowserRouter，Route}；
从“./components/Layout”导入布局；
从“./components/Home”导入Home；
从“./components/whoware”导入whoware；
从“./组件/服务”导入服务；
从“./components/Contact”导入联系人；
从“/components/Errornotfound”导入Errornotfound；
导出默认函数路由（）{
返回(
);
}

最后，这是我的简单布局组件-

import React from 'react';
import { Switch, BrowserRouter, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './components/Home';
import Whoweare from './components/Whoweare';
import Services from './components/Services';
import Contact from './components/Contact';
import Errornotfound from './components/Errornotfound';

export default function Routes() {

    return (
        <BrowserRouter>
            <div>
                <Route component={ Layout }/>
                <Switch>
                    <Route exact path='/' component={ Home } />
                    <Route path='/whoweare' component={ Whoweare } />
                    <Route path='/services' component={ Services } />
                    <Route path='/contact' component={ Contact } />
                    <Route component={ Errornotfound } />
                </Switch>
            </div>
        </BrowserRouter>
    );
}

正如您所注意到的，页脚是最后一个组件，但即使它不显示在底部

import React, { Component } from 'react';
import Navbars from './Navbars';

import Header from './Header';
import Banners from './Banners';
import Footer from './Footer';

export default class Layout extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return(
            <div>
                <col>
                    <Header/>
                    <div>
                        <col>
                            <Navbars/>
                        </col>
                        <Banners/>
                    </div>
                    <div>
                        <col>
                            {this.props.Children}
                        </col>
                    </div>
                        <Footer/>
                </col>
            </div>
        );
    }
}

import React，{Component}来自'React'；
从“/Navbars”导入导航栏；
从“./头”导入头；
从“./横幅”导入横幅；
从“./Footer”导入页脚；
导出默认类布局扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回(
{this.props.Children}
);
}
}

---

提前感谢您所做的一切，不知何故，我找不到解决方案，即使在版面中有一个新的div。

目前

版面

没有任何孩子。您将整个

开关

和内容组件放在

布局

之后

而不是以下内容：

        <Route component={ Layout }/>
        <Switch>
            <Route exact path='/' component={ Home } />
            <Route path='/whoweare' component={ Whoweare } />
            <Route path='/services' component={ Services } />
            <Route path='/contact' component={ Contact } />
            <Route component={ Errornotfound } />
        </Switch>

看起来你想做的事情更像：

<Layout>
    <Switch>
        <Route exact path='/' component={ Home } />
        <Route path='/whoweare' component={ Whoweare } />
        <Route path='/services' component={ Services } />
        <Route path='/contact' component={ Contact } />
        <Route component={ Errornotfound } />
    </Switch>
</Layout>

---

您还需要修复

{this.props.Children}

。这应该是

{this.props.children}

--一旦

布局

有了孩子，这就很重要了。

是的，@Ryan Cogswell我想我已经试过了，但显然我没有，这是解决办法，非常感谢，祝你有一天愉快。