反应路由器全局标头 [英] React router global header

问题描述

我刚刚开始学习 React，我正在尝试制作一个 SPA 博客，它有一个全局定位的固定标题.

从'react'导入React；从'react-dom'导入{渲染}；//在这里导入其他组件使成为((<路由器历史={browserHistory}><Route path="/" component={Home}/><Route path="/About" component={About}/><Route path="/Contact" component={Contact}/><Route path="*" component={Error}/></路由器>), document.getElementById('app'));

所以，每条路线都有相同的标题，从我的角度背景来看，我会在 ui-view 之外使用标题.

在每个单独的页面组件中导入header组件是一个很好的做法，或者我可以在我的上添加header组件;?

更新:

我想使用这样的东西:

Routes 组件，我在其中定义我的路由:

class Routes extends React.Component {使成为() {返回 (<路由器历史={browserHistory}><IndexRoute 组件={Home}/><Route path="/studio" component={Studio}/><Route path="/work" component={Work}/><Route path="*" component={Home}/></路由器>)}}

然后在主 Index.js 文件上，我想呈现如下内容:

import Routes from './components/Routes';使成为((<div><div className="header">header</div><路线/>

), document.getElementById('app'));

谁能解释一下?谢谢！

解决方案

根据我的经验，为你的页面定义一个布局组件会很好，比如......

布局组件

render() {返回(<div><标题/>{ this.props.children }/* 你想在使用这种布局的每个页面上显示的任何其他内容 */<页脚/>

);}

然后将布局导入到每个页面组件中...

联系页面组件

render() {返回 (<布局><联系组件/>/* 把你想要的一切放在这个页面的布局组件中 */</布局>);}

并且您可以保持路由不变，您的路由将呈现联系页面，进而呈现您的标题.

通过这种方式，您可以控制多个页面上的重复内容，如果您需要一个或两个略有不同的页面，您可以创建另一个布局并使用它.

I just started learning React, I'm trying to make a SPA blog, which has a global positioned fixed header.

import React from 'react';
import { render } from 'react-dom';
// import other components here

    render((
      <Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/About" component={About} />
        <Route path="/Contact" component={Contact} />
        <Route path="*" component={Error} />
      </Router>
    ), document.getElementById('app'));

So, each routes has the same header and from my angular background, I would use header outside ui-view.

Its a good practice to import the header component in each individual page component, or can I add the header component on my <Router><myHeader/><otherRoutes/></Router>?

Update:

I was thinking to use something like this:

Routes component, where I define my routes:

class Routes extends React.Component {
    render() {
        return (
            <Router history={browserHistory}>
                <IndexRoute component={Home} />
                <Route path="/studio" component={Studio} />
                <Route path="/work" component={Work} />
                <Route path="*" component={Home} />
            </Router>
        )
    }
}

And then on main Index.js file I would like to render something like:

import Routes from './components/Routes';

render((
   <div>
      <div className="header">header</div>
      <Routes />
   </div>
), document.getElementById('app'));

Can someone explain me? Thanks!

解决方案

From my experience it can be good to define a layout component for your page, something like...

Layout Component

render() {
    return(
       <div>
          <Header />
             { this.props.children }
             /* anything else you want to appear on every page that uses this layout */
          <Footer />
       </div>
    );
}

You then import layout into each of your page components...

Contact Page Component

render() {
    return (
        <Layout>
           <ContactComponent />
           /* put all you want on this page within the layout component */
        </Layout>
    );
}

And you can leave your routing the same, your route will render the contact page and in turn will render your header.

This way you get control of repetitive stuff that will be on multiple pages, if you need one or two slightly different pages you can just create another layout and use that.

这篇关于反应路由器全局标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！