sllvn//

Defining page titles in react-router route config

I’ve been using react-helmet to set page titles in Nomos, but it’s felt weird to me to litter my JSX templates with tags. Thinking it would be cleaner (and would allow me to re-use titles, e.g. for breadcrumbs) if I pulled the page titles into the route config, I created a higher-order component that I now just wrap my container components in.

I use this by defining a title on my route’s config, which can be either a string or a function (which receives the component’s props as an argument). Something like:

<Route
  path='/documents/:documentId'
  component={DocumentContainer}
  title={props => props.documentName}
/>