[英]ReactJS Header and Footer
I am trying to create a Layout component which would render the Header and Footer . 我正在尝试创建一个可以呈现页眉和页脚的布局组件。 So that I can later on use the Layout like 这样我以后就可以使用布局了
<Layout> ... </Layout>
I have used Routing in the Header and Footer, obviously. 显然,我在页眉和页脚中使用了Routing。 To do this, I need to use 要做到这一点,我需要使用
<Router history...
<Route path...
When I do this one after the other(for header and footer: though I feel that this is wrong) in my layout.js. 当我在layout.js中逐个执行此操作时(对于页眉和页脚:虽然我觉得这是错误的)。 It works. 有用。 The header and footer are shown in the browser. 页眉和页脚显示在浏览器中。 However, they don't work properly . 但是,它们无法正常工作 。 On refresh the footer vanishes and sometimes both, the header and the footer. 在刷新时,页脚消失,有时两者都消失,页眉和页脚。 I strongly believe that rendering Router one after the other is the reason for this malfunctioning, but I can't figure out the correct approach. 我坚信,一个接一个地渲染路由器是造成这种故障的原因,但我无法弄清楚正确的方法。 Moreover, I don't want to use the following snippets 此外,我不想使用以下代码段
header.js header.js
import React from 'react';
import {Link} from 'react-router'
import {Navbar, NavItem} from 'react-materialize';
export default React.createClass({
render(){
return (
<div>
<Navbar brand='logo' right>
<NavItem><Link to="/Home" activeClassName="active">Home</Link></NavItem>
<NavItem><Link to="/Sign-In" activeClassName="active">Sign In</Link></NavItem>
<NavItem><Link to="/Register" activeClassName="active">Register</Link></NavItem>
</Navbar>
{this.props.children}
</div>
)
}
})
footer.js footer.js
import React, {Component} from 'react';
import {Link} from 'react-router'
import {Footer} from 'react-materialize';
import '../../resource/template.css'
class RT_Footer extends Component{
render(){
return (
<div>
{this.props.children}
<Footer copyrights="© 2015 Copyright Text"
moreLinks={
<Link className="grey-text text-lighten-4 right" href="#!">More Links</Link>
}
links={
<ul>
<li><Link to="/About Us" className="grey-text text-lighten-3">About Us</Link></li>
<li><Link to="/Terms & Conditions" className="grey-text text-lighten-3">Terms & Conditions</Link></li>
<li><Link to="/Help" className="grey-text text-lighten-3">Help</Link></li>
<li><Link to="/Contact Us" className="grey-text text-lighten-3">Contact Us</Link></li>
</ul>
}
className='example'
>
<h5 className="white-text">Footer Content</h5>
<p className="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</Footer>
</div>
);
}
}
export default RT_Footer;
layout.js layout.js
import {Router, Route, browserHistory} from 'react-router'
class Layout extends Component {
render(){
return (
<div>
<span>
<Router history={browserHistory}>
<Route path="/" component={Header}>
<Route path="/Home" component={Home}/>
<Route path="/Sign-In" component={SignIn}/>
<Route path="/Register" component={Register}/>
</Route>
</Router>
</span>
<span>
<Router history={browserHistory}>
<Route path="/" component={RT_Footer}>
<Route path="/About Us" component={About}/>
<Route path="/Terms & Conditions" component={TC}/>
<Route path="/Register" component={Register}/>
</Route>
</Router>
</span>
</div>
);
}
}
export default Layout;
Then I simply rendered Layout in index.js 然后我简单地在index.js中渲染Layout
I suggest that you don't render the Router component twice (I haven't checked but you probably can't). 我建议你不要 两次渲染路由器组件(我没有检查,但你可能不能)。
So, how the Router component works : 那么,路由器组件如何工作:
Now, in your case I suggest you to do something like that : 现在,在你的情况下,我建议你做这样的事情:
app.js app.js
import {Router, Route, browserHistory} from 'react-router'
import Layout from './components/Layout'
// Import here all the required components used by the router such as SignIn, Register, ...
render(
<Layout>
<Router history={browserHistory}>
<Route path="/" component={RT_Footer}>
<Route path="/About Us" component={About}/>
<Route path="/Terms & Conditions" component={TC}/>
<Route path="/Register" component={Register}/>
// Add as many Route components as needed
</Router>
</Layout>,
document.getElementById('react-anchor')
Then your layout file should look like this : 然后您的布局文件应如下所示:
layout.js layout.js
import Header from './Header'
import Footer from './Footer'
import React, {Component} from 'react'
class Layout extends Component {
render() {
return (
<div>
<Header />
{this.props.children}
<Footer />
</div>
)
}
}
And in your Header and Footer component, render whatever you want, to provide link to load the requested component you can use from react-router or some other way the library offer (see their documentation) 在您的页眉和页脚组件中,渲染您想要的任何内容,以提供链接以加载您可以从react-router或库提供的其他方式加载所请求的组件(请参阅其文档)
Edit : 编辑:
Careful about route Path, like "Terms & Conditions" is probably not a valid path 小心路径路径,如“条款和条件”可能不是一个有效的路径
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.