javascript - React 路由器全局 header

Question

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

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

因此，每条路线都有相同的标题，并且从我的 Angular 背景来看，我会在 ui-view 之外使用标题。

在每个单独的页面组件中导入 header 组件是一个很好的做法，或者我可以在我的 <Router><myHeader/><otherRoutes/></Router> 上添加 header 组件吗？ ？

更新:

我想使用这样的东西:

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

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

然后在主 Index.js 文件上我想渲染如下内容:

import Routes from './components/Routes';

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

谁能给我解释一下吗？谢谢!

Answer 1

根据我的经验，为页面定义布局组件可能会很好，例如......

布局组件

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

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

联系页面组件

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

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

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