页脚组件在 React Router 4 和布局中的错误位置

Question

我正在使用 React router 4.3.1 当然，我已经创建了一个 Layout 组件，我的不同内容组件在 {this.props.Children} 上呈现正常，但我似乎无法成功放置 Footer 组件在所有Layout的底部，即使是在新的div和"outside"所有逻辑中，我的Footer组件从上到下都是第三种形式，在底部有内容。我已经为此奋斗了很多周，但没有成功，这是我的代码。

路由组件。-

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

提前感谢您所做的一切，不知何故我找不到解决方案，即使在布局中使用新的 div 也找不到。

Answer 1

目前 Layout 没有任何 children。您将整个 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 有 children.

这将很重要

页脚组件在 React Router 4 和布局中的错误位置

Footer Component wrong position in React Router 4 and Layout

javascript

layout

reactjs

react-router-v4

react-router-dom