React js do common header

问题:

I am new to ReactJS. I need to have a common header and change title according to the route changes. Do I need to create a header.jsx file and import it? Or else, how can I render the header (common file) with route?

My routing part looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import Home from './Home.jsx';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router';

ReactDOM.render((
    <Router history = {browserHistory}>
        <Route path = "/home" component = {Home} />
        <Route path = "/" component = {App}>
        </Route>
    </Router>
));

回答1:

This should work:

header.jsx:

class Header extends Component {
  render() {
    return (<div>Your header</div>);
  }
}

first-page.jsx:

class FirstPage extends Component {
  render() {
    return (<div>First page body</div>);
  }
}

second-page.jsx

class SecondPage extends Component {
  render() {
    return (<div>Second page body</div>);
  }
}

app.jsx:

import Header from './header.jsx';

class App extends Component {
  render() {
    return (
      <div>
        <Header />
        {this.props.children}
      </div>
    );
  }
}

web-app.jsx:

import App from './app.jsx';
import FirstPage from './first-page.jsx';
import SecondPage from './second-page.jsx';

ReactDOM.render(
  <Router history = {browserHistory}>
    <Route path = "/" component = {App}>
      <Route path = "/first" component = {FirstPage}>
      <Route path = "/second" component = {SecondPage}>
    </Route>
  </Router>
);

回答2:

try this https://www.npmjs.com/package/react-helmet

import React from "react";
import Helmet from "react-helmet";

export default function Application () {
return (
    <div className="application">
        <Helmet title="My Title" />
        ...
    </div>
);};

回答3:

So if you need to display a common header among your routes, there's a couple ways of doing it. One is you can define your header inside its own component. Something simple for example:

import React from 'react';
export default React.createClass({
  render() {
    return <div className='header'><h1>{this.props.title}</h1></div>;
  }
}

Then in your home component, app component, etc. Simply put inside your render(), after importing it at the top of each file.

The other option is to create your own sort of container component, still using the Header component we defined above:

import React from 'react';
export default React.createClass({
  render() {
    return (
      <div className='container'>
        <Header title={this.props.title} />
        {this.props.children}
      </div>
    );
  }
}

Then where you declare your routes:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import Home from './Home.jsx';
import Container from './Container.jsx';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router';

ReactDOM.render((
    <Router history = {browserHistory}>
        <Route path = "/home" component = {<Container title='home'><Home /></Container>} />
        <Route path = "/" component = {<Container title='app'><App /></Container>}>
        </Route>
    </Router>
));

Admittedly i have not tried that second option. You might have to pass the router as a parameter from the container component down to its use of children component, if you want to do things like router.transitionTo('/path').

It's just an option if you don't want to repeat everywhere.