Javascript 反应路由器全局标头

React router global header

提问by Hiero

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

我刚开始学习 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'));

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

所以，每条路线都有相同的标题，从我的角度背景来看，我会在 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>?

在每个单独的页面组件中导入页眉组件是一个好习惯，或者我可以在我的<Router><myHeader/><otherRoutes/></Router>?

Update:

更新：

I was thinking to use something like this:

我想使用这样的东西：

Routes component, where I define my routes:

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:

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

import Routes from './components/Routes';

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

Can someone explain me? Thanks!

有人可以解释我吗？谢谢！

回答by Geraint

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.

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

回答by Mawaheb

I find this way useful:

我觉得这种方式很有用：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from "./components/Header";
import Home from "./components/Home";
import Dashboard from "./components/Dashboard";
import Footer from "./components/Footer";
class App extends Component {
  constructor() {
    super();
    this.state = {
      stuff: stuff;
    };
  }
render() {
 let { stuff } = this.state;
 return (
  <Router> //wrapper for your router, given alias from BrowserRouter
   <div className="App">
    <Header /> //this component will always be visible because it is outside of a specific Route
    <Route exact path="/" component={Home}/>  //at the root path, show this component
    <Route path="/dashboard" component={()=><Dashboard stuff={stuff} />}/>  //at the path '/dashboard', show this other component
    <Footer /> //this is also permanently mounted
   </div>
  </Router>
 );
 }
}
export default App;

credit goes to: David Kerr

归功于：大卫·克尔

回答by Rafael Lebre

The question is already answered but I'm here to show another approach and say why I prefer that.

这个问题已经得到了回答，但我在这里展示另一种方法并说明为什么我更喜欢这种方法。

I also think that it's a good thing to have a Layout component

我也认为有一个Layout组件是件好事

function Layout (props) {
  return (
    <div>
      <Header/>
      <div className="content">
        {props.children}
      </div>
    </div>
  );
}

But instead of render it into each route component you can render it just once as a parent for your routes.

但是不是将它渲染到每个路由组件中，您可以将它作为路由的父级渲染一次。

return (
  <Router>
    <Layout>
      <Switch>
        <Route path="/about">
          <About/>
        </Route>
        <Route path="/contact">
          <Contact/>
        </Route>
        <Route path="/">
          <Home/>
        </Route>
      </Switch>
    </Layout>
  </Router>
);

This is good because in most cases you will not waste time with the layout and if you have different layouts you only need to work inside the Layout component.

这很好，因为在大多数情况下，您不会在布局上浪费时间，而且如果您有不同的布局，您只需要在 Layout 组件中工作。