Dynamic Title

Page title now comes from paths.js and updates on route change
BradDenver · Dec 31, 2014 · 531c9bb · 531c9bb
1 parent d7216b9
commit 531c9bb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/elements/Layout.jsx b/elements/Layout.jsx
@@ -1,19 +1,23 @@
 var React = require('react'),
   LayoutNav = require('./LayoutNav.jsx');
   Router = require('react-router');
-  RouteHandler = Router.RouteHandler;
+  RouteHandler = Router.RouteHandler,
+  paths = require('../paths.js');
 
 var Layout = React.createClass({
+  mixins: [Router.State],
+
   getDefaultProps: function() {
     return {title: 'React Static Site'};
   },
 
   render: function() {
     var script = (process.env.NODE_ENV!=='production') ? <script src="http://localhost:3000/scripts/bundle.js"></script> : '';
+    var title = paths.titleForPath(this.getPathname());
     return (
       <html>
         <head>
-          <title>{this.props.title}</title>
+          <title>{title}</title>
         </head>
         <body>
           <div id="layout">

diff --git a/paths.js b/paths.js
@@ -0,0 +1,18 @@
+var paths = {
+  '/': {
+    'title': 'React Static Site'
+  },
+  '/about': {
+    'title': 'About - React Static Site'
+  }
+};
+
+module.exports = {
+  allPaths: function() {
+    return paths;
+  },
+  titleForPath: function(path) {
+    return paths[path].title;
+  }
+};
+