Category: Programming

I have been learning React for the past few weeks, and I am loving it. I spent today learning react-router at https://github.com/reactjs/react-router-tutorial. After going through it and implementing a lot of it in my app, I realized that it did not cover one thing that I really need: dynamic page title.

I have googled and looked at different examples of how others have done it (e.g. react-document-title, document.title) but I finally decided to tinker on my own and see if I can come up with my own implementation. (I know… another one???)

My sample code will be added to the result of lesson 3 from the tutorial I linked above:

App.js:

import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return <div>
      <h1>
        React Router Tutorial
      </h1>
      <ul role="nav">
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/repos">Repos</Link>
        </li>
      </ul>
    </div>
  }
})

index.js:

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Router>
), document.getElementById('app'))

Looking at index.js, I thought why not add a title attribute on the Route nodes directly? That would be the most convenient location, in my mind.

index.js:

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    <Route path="/repos" title="Repositories" component={Repos}/>
    <Route path="/about" title="About Me" component={About}/>
  </Router>
), document.getElementById('app'))

We added it to routing, but how will App get its value? This part is easy.

App.jsx:

import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return <div>
      <h1>
        {this.props.children.props.route.title}
      </h1>
      <ul role="nav">
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/repos">Repos</Link>
        </li>
      </ul>
    </div>
  }
})

That’s it.