LearnCode.academy react #6 video fix for react-router 1.0 > 2.0

Layout.js

// project-name/src/js/pages/Layout.js

import React from 'react';

// Allows linking via react to other components
import { Link } from 'react-router';

// Browser history
import { browserHistory } from 'react-router';

export default class Layout extends React.Component {
  navigate() {
    // push state saves history
    this.context.router.push('/');
    // replace state will NOT save history
    // this.context.router.replace('/')
  }

  render() {
    // { this.props.children } will inject Links components as child components 
    // into the current parent component
    // (i.e. layout will inject the contents of the linked components)
    return (
      <div>
        <h1>Red Like Roses</h1>
        { this.props.children }
        <Link to="archives" class="btn btn-warning">archives</Link><br/>
        <Link to="settings"><button class="btn btn-success">settings</button></Link>
        <button onClick={ this.navigate.bind(this)}>featured</button>
      </div>
    );
  }
};

// https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#navigating-in-route-components
// This is the needed to replace "this.props.history.pushState(...)"
Layout.contextTypes = {
    router: React.PropTypes.object.isRequired
}