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

而在你的頁眉和頁腳組件，使任何你想要的，提供鏈接加載請求的組件，您可以從反應的路由器或其他方式使用庫報價（請參閱其文檔）

編輯：

小心路線路徑，如「條款&條件」可能不是一個有效的路徑