I have a default layout page here using react router:
Header = require('./components/Header'),
Footer = require('./components/Footer'),
var sampleApp= React.createClass({
getDefaultProps() {
return {
title: 'Page One'
};
},
render: function (){
return (
<div className="app">
<Header title={this.props.title} />
<RouteHandler />
<Footer />
</div>
);
},
});
var routes = (
<Route name="app" path="/" handler={sampleApp}>
<DefaultRoute name="home" handler={HomePage} />
<Route name="add-school" handler={AddPage} />
</Route>
);
Router.run(routes, function(Handler){
var mountNode = document.getElementById('app');
React.render(<Handler /> , mountNode);
});
Am I able to pass the page title into the header component above? Here is one of pages, with the title set in default props.
var HomePage = React.createClass({
mixins: [Router.Navigation],
getDefaultProps() {
return {
// set page title here
title: 'Page Two'
};
},
getInitialState: function () {
return {
tiles: null
}
},
The page title doesnt show and stays as the default 'page one' in the layout. Can anyone please tell me how I can pass props up to the header component?
You can use a component like react-document-title to solve the problem.