![](/img/trans.png)
[英]React Router - get URL params outside of page component (inside of layout footer)
[英]Footer Component wrong position in React Router 4 and Layout
我将React路由器4.3.1与React配合使用,我已经创建了一个Layout组件,我的不同内容组件可以正常显示{this.props.Children},但我似乎无法成功将Footer组件放置在所有组件的底部即使是在新的div中并且在所有逻辑之外,我的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>
);
}
最后,这是我简单的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>
);
}
}
谢谢您提前完成所有工作,以某种方式我无法找到解决方案,即使在Layout中没有新的div也是如此。
目前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
有子级,这将很重要。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.