React jsは共通のヘッダーを使用する

Question

jsに反応する新しい、私はヘッダーを共通にする必要があり、ルートの変更に応じてタイトルを変更する必要があります。 header.jsxファイルを作成してインポートする必要がありますか？それともヘッダー（共通ファイル）をルートでレンダリングするのですか？ ルーティングパートは次のようになります。

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

Answer 1

これは動作するはず：

header.jsx：

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

一page.jsx：

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

二page.jsx

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

アプリ。 jsx：

import Header from './header.jsx'; 

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

ウェブ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> 
); 

Answer 2

あなたのルートの間で共通のヘッダを表示する必要があるのであれば、それをやってのカップルの方法があります。この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> 
);}; 

Answer 3

を試してみてください。 1つは独自のコンポーネント内にヘッダを定義できることです。例えば、単純な何か：するとなどご自宅のコンポーネント、アプリケーションコンポーネントに簡単に内部に入れ

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

があなたの（レンダリング）、各ファイルの先頭にそれをインポートした後。確かに私が持っている

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

：次に、あなたのルートを宣言するところ

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

：

他のオプションは、まだ我々は、上記で定義されたヘッダ・コンポーネントを使用して、コンテナコンポーネントの独自の並べ替えを作成することですその2番目のオプションを試していない。 router.transitionTo('/path')のようなことをしたい場合は、コンテナコンポーネントから子コンポーネントの使用に至るまで、ルータとしてパラメータを渡す必要があります。

どこでも繰り返したくない場合は、単なるオプションです。