ReactJS 页眉和页脚

Posted 2023-02-22

【中文标题】ReactJS 页眉和页脚

【英文标题】：ReactJS Header and Footer

【发布时间】：2017-03-20 09:25:16

【问题描述】：

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

<Layout> ... </Layout>

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

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

当我在 layout.js 中一个接一个地执行此操作时（对于页眉和页脚：虽然我觉得这是错误的）。有用。页眉和页脚显示在浏览器中。 但是，它们不能正常工作。在刷新页脚消失，​​有时，页眉和页脚。我坚信一个接一个地渲染路由器是导致此故障的原因，但我无法找出正确的方法。而且，我不想用下面的sn-ps

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

【参考方案1】：

我建议你不要渲染路由器组件两次（我没有检查，但你可能不能）。

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

你给路由器一个历史记录（通过历史道具），在这里你使用同一个库中的 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 或库提供的其他方式使用的请求组件（请参阅他们的文档）

编辑：

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

【讨论】：

但它仍然无法工作，尽管使用

@Quentin，我尝试使用这个答案并收到以下错误：Uncaught Error: You should not use <Link> outside a <Router> 为什么会这样？代码是一样的，只是

里面有

包括 在内的任何组件都需要嵌套在 中。也许试试 ...

@Quentin 这很有帮助。为我工作。我在这里面临一个问题。我必须仅在用户登录时显示页眉和页脚。我可以访问令牌 this.props.children，但在页眉或页脚中无法访问它。你能帮忙吗？