ReactJS页眉和页脚

Question

我想创建一个布局分量将会使头和页脚。所以，我可以在以后使用布局像

<Layout> ... </Layout> 

我在页眉和页脚使用的路由，效果显着。要做到这一点，我需要使用

<Router history... 
<Route path... 

当我做这一个接一个：在我layout.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

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="&copy; 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

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; 

然后，我只是呈现布局在index.js

Answer 1

我建议你不使路由器组件两次（我没有检查，但你可能无法）。

那么，如何在路由器组件的工作原理：

• 你给路由器的历史（通过历史的道具），在这里你使用browserHistory来自同一库至极的罚款。
• 然后，使用路径组件和路径为应用程序定义所有现有路由，并在浏览器url匹配此路径属性时加载要加载的组件。现在

，你的情况我建议你做这样的事情：

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') 

那么你的布局文件应该是这样的：

布局。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> 
     ) 
    } 
} 

而在你的页眉和页脚组件，使任何你想要的，提供链接加载请求的组件，您可以从反应的路由器或其他方式使用库报价（请参阅其文档）

编辑：

小心路线路径，如“条款&条件”可能不是一个有效的路径