make components "active" using appropriate props

No need for ternaries, you can use the props "activeClassName" and "onlyActiveOnIndex" which will work accordingly.

Source: https://github.com/reactjs/react-router-tutorial/tree/master/lessons/09-index-links

(I know this probably won't get committed, b/c then you'd have to do a whole new video. However, if you do commit, you could comment out the old version so that people won't be completely lost when they DL the source code.)

Author: gfantom

2-react-router/src/js/components/layout/Nav.js

@@ -17,9 +17,9 @@ export default class Nav extends React.Component {
   render() {
     const { location } = this.props;
     const { collapsed } = this.state;
-    const featuredClass = location.pathname === "/" ? "active" : "";
-    const archivesClass = location.pathname.match(/^\/archives/) ? "active" : "";
-    const settingsClass = location.pathname.match(/^\/settings/) ? "active" : "";
+    // const featuredClass = location.pathname === "/" ? "active" : "";
+    // const archivesClass = location.pathname.match(/^\/archives/) ? "active" : "";
+    // const settingsClass = location.pathname.match(/^\/settings/) ? "active" : "";
     const navClass = collapsed ? "collapse" : "";
 
     return (
@@ -35,13 +35,13 @@ export default class Nav extends React.Component {
           </div>
           <div class={"navbar-collapse " + navClass} id="bs-example-navbar-collapse-1">
             <ul class="nav navbar-nav">
-              <li class={featuredClass}>
+              <li activeClassName="active" onlyActiveOnIndex={true}>
                 <IndexLink to="/" onClick={this.toggleCollapse.bind(this)}>Featured</IndexLink>
               </li>
-              <li class={archivesClass}>
+              <li activeClassName="active">
                 <Link to="archives" onClick={this.toggleCollapse.bind(this)}>Archives</Link>
               </li>
-              <li class={settingsClass}>
+              <li activeClassName="active">
                 <Link to="settings" onClick={this.toggleCollapse.bind(this)}>Settings</Link>
               </li>
             </ul>