Неправильная позиция компонента нижнего колонтитула в React Router 4 и макете

Question

Я использую React Router 4.3.1 с React, конечно, я создал компонент Layout, мои различные компоненты содержимого отображаются нормально, хотя {this.props.Children}, но я не могу разместить компонент Footer наВ нижней части всего макета, даже если он находится в новом элементе div и «вне» всей логики, мой компонент нижнего колонтитула является третьей формой сверху вниз, в нижней части находится содержимое.Я боролся с этим в течение многих недель безуспешно, вот мой код.

Компонент Routes .-

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

Наконец, это мой простой компонент Layout .-

Как вы можете заметить, нижний колонтитул - последний компонент, но даже если он не отображается внизу.

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

Спасибо за все заранее, почему-то я не могу найти решение для этого,даже с новым div в Layout.

Answer 1

В настоящее время Layout не имеет детей.Вы ставите все Switch с вашими компонентами контента после Layout.

Вместо следующего:

        <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} - это будет иметь значение, когда у Layout будут дети.