我正在尝试创建一个Layout 组件来呈现Header 和Footer。这样我以后就可以像使用 Layout

<Layout> ... </Layout>

显然，我在页眉和页脚中使用了路由。为此，我需要使用

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

当我在我的 layout.js 中一个接一个地执行此操作时(对于页眉和页脚:虽然我觉得这是错误的)。有用。页眉和页脚显示在浏览器中。 但是，它们不能正常工作。刷新时，页脚消失，​​有时页眉和页脚都消失。我坚信一个接一个地渲染 Router 是造成这种故障的原因，但我想不出正确的方法。此外，我不想使用以下代码片段

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 中渲染 Layout

最佳答案

我建议您不要渲染路由器组件两次(我没有检查过，但您可能不能)。

那么，Router 组件是如何工作的:

• 你给路由器一个历史(通过 history Prop )，在这里你使用来自同一个库的 browserHistory，这很好。
• 然后，您使用带有路径的 Route 组件为您的应用程序定义所有现有路由，如果浏览器 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')

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

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

在您的 Header 和 Footer 组件中，呈现您想要的任何内容，以提供链接以加载您可以从 react-router 或库提供的其他方式使用的请求组件(请参阅他们的文档)

编辑:

注意路线路径，例如“条款和条件”可能不是有效路径

关于javascript - ReactJS 页眉和页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40458335/