title: Display title with React Helmet
body: <p>I'm using <a href="https://www.gatsbyjs.org/" rel="nofollow noreferrer">Gatsby</a>'s inclusion of <a href="https://github.com/nfl/react-helmet" rel="nofollow noreferrer">react-helmet</a> to display <code>&lt;title /&gt;</code> and <code>&lt;meta /&gt;</code> tags in the <code>&lt;head /&gt;</code>. What I'd really like to do is send the same title to my global <code>&lt;Header /&gt;</code> component so the title is displayed in the actual text of the page as well as in the head. How would I accomplish something like this with React? I'm used to Ember where I can just set a <code>pageTitle</code> property on the Application controller/route and pass it down to components as well as update the <code>&lt;head /&gt;</code> values with something like ember-wormhole.</p>
  
  <p>I understand I could use Flux for a global state or I could pass setTitle to my page components and they could send up a setTitle action on each Page component's <code>componentDidMount</code>, but is there a better way to handle this? Perhaps with React Router 4?</p>
  
  <p>So far, I was able to pull in the location context like so:</p>
  
  <pre><code>const TemplateWrapper = (args) =&gt; {
    const { children, location } = args
    return (
      &lt;div&gt;
        &lt;Helmet title={location.pathname} /&gt;
        &lt;Header title={location.pathname} /&gt;
        &lt;div&gt;
          {children()}
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>So I could add a function in there to lookup a page title based on the path, but I'd like the "Title" of the page to be set globally instead. </p>