page title のダイナミックな変更とrouter

React

react-router

  • SPAを作る際は必須になりそう。
  • 今回の私のケースでは不要かも。とりあえず記事一覧ページだけでReactを試すから。ページ番号をpropsで親に与えて、それを後述の react-document-title に食わせるだけでOKか。

react-document-title

  • ブラウザ側のみで遷移をした際にページタイトルを追従させるために使う。
  • 以下のように書いても良いけど、DOMの直接操作は避けたいところ。
var Handler = React.createClass({
  componentDidMount: function() {
    someStore.fetchStuff(this.params.id, function(data) {
      this.setState({data: data});
      document.title = "Amazing Page | " + data.name;
    }.bind(this));
  }
});

Recommended way to set document.title? · Issue #49 · rackt/react-router · GitHub

これらの使用例

metaタグも変更したい！

  • これは <head></head> もcomponentに含めないとダメ？...