How to use the react-router.State function in react-router

// bootstrap initialization
var $ = require('jquery');
window.jQuery = $;
require('bootstrap');

var React = require('react/addons');

var Router = require('react-router'),
    RouteHandler = Router.RouteHandler;

var NavBar = require('./nav-bar.jsx'),
    OverlayManager = require('./overlays/overlay-manager.jsx');

module.exports = React.createClass({

  mixins: [Router.State],

  render: function () {
    return (
      <div>
        
        
        
      </div>
    );
  }
});

var $ = require('jquery');
var React = require('react');
var Router = require('react-router');

var authorizationStore = require('../stores/authorization-store');
var Console = require('./console');
var consoleActionCreators = require('../action-creators/console-action-creators');
var consoleStore = require('../stores/console-store');
var Modal = require('./modal');
var modalActionCreators = require('../action-creators/modal-action-creators');
var modalStore = require('../stores/modal-store');
var Navigation = require('./navigation');
var platformManagerActionCreators = require('../action-creators/platform-manager-action-creators');

var PlatformManager = React.createClass({displayName: "PlatformManager",
    mixins: [Router.Navigation, Router.State],
    getInitialState: getStateFromStores,
    componentWillMount: function () {
        platformManagerActionCreators.initialize();
    },
    componentDidMount: function () {
        authorizationStore.addChangeListener(this._onStoreChange);
        consoleStore.addChangeListener(this._onStoreChange);
        modalStore.addChangeListener(this._onStoreChange);
        this._doModalBindings();
    },
    componentDidUpdate: function () {
        this._doModalBindings();
    },
    _doModalBindings: function () {
        if (this.state.modalContent) {
            window.addEventListener('keydown', this._closeModal);

var React = require('react');
var Router = require('react-router');

var ClusterStore = require('../stores/ClusterStore');
var UserStore = require('../stores/UserStore');
var ClusterActions = require('../actions/ClusterActions');

var HeaderSidebar = React.createClass({
    mixins: [Router.State],
    getInitialState: function() {
        return {
            clusters: ClusterStore.getClusters()
        };
    },
    componentDidMount: function() {
        ClusterStore.addChangeListener(this.onChangeHandle);
    },
    componentWillUnmount: function() {
        ClusterStore.removeChangeListener(this.onChangeHandle);
    },
    render: function() {
        var clusterNames = [];
        var currentClusterName = this.getParams().clusterName;
        var me = UserStore.getMe();

Or <a style="{{">
            make your own recording
          </a>
        
        <div>
          <div id="player"></div>
        </div>
        
      
    );
  }

});

var SavedSongApplication = React.createClass({
  mixins : [Router.State],
  componentDidMount : function() {
    ApplicationActions.loadSavedSong(this.getParams().savedSongId);
  },

  render : function() {
    return ;
  }
});

var routes = (

var React = require('react')
	, Reflux = require('reflux')
	, Router = require('react-router')
	, activityStore = require('../../stores/activityStore')
	, activityActions = require('../../actions/activityActions')
	, Activity = require('./activity.jsx')
	, Spinner = require('../spinner.jsx')
	, isNumber = require('amp-is-number');

var Activities = React.createClass({

	mixins: [
		Reflux.connect(activityStore, 'activities')
		, Router.State
	]

	, getInitialState: function() {
		activityActions.loadActivities(this.getParams().uuid);

		return {
			activities: []
		};
	}

	, componentWillReceiveProps: function() {
		this.setState({ activities: [] });
		activityActions.loadActivities(this.getParams().uuid);
	}

	, _sortActivities: function(activities) {

import Router from 'react-router';

import {Authentication} from '../mixins/component.jsx';

import WorkflowActions from '../actions/WorkflowActions.jsx';

import {WorkflowStore} from '../stores/WorkflowStore.jsx';

import {StateMachineComponent} from '../react-statemachine/component.jsx';

import {StateMachine, SimpleState} from '../react-statemachine/classes.jsx';

import SimpleTask from './reusable/states/SimpleTask.jsx';

export default React.createClass({
    mixins: [ Router.Navigation, Router.State, Authentication],
    statics: {
        fetch(params) {
            return WorkflowActions.loadDetailIfNecessary.triggerPromise(params.object).then(
                (workflow) => {
                    return workflow
                }
            );
        }
    },
    displayName: route => {
        return `Workflow ${route.props.detail.Workflow.title}`;
    },
    serializeStateMachine(){
        const sm = new StateMachine();

        sm.addStateClass({

var React = require('react');

var Header = require('../components/header/header.jsx');
var LoginNoPasswordForm = require('../components/login-no-pass-form.jsx');
var KeyEmailed = require('../components/key-emailed.jsx');
var SetPasswordMigrationForm = require('../components/set-password-migration-form.jsx');
var IconText = require('../components/icontext.jsx');
var ga = require('react-ga');
var State = require("react-router").State;
var url = require('url');
var WebmakerActions = require('../lib/webmaker-actions.jsx');
var cookiejs = require('cookie-js');

require('es6-promise').polyfill();
require('isomorphic-fetch');

var UserMigration = React.createClass({
  mixins: [
    State
  ],
  componentDidMount: function() {
    document.title = "Webmaker Login - Set a Password";
  },
  getInitialState: function() {
    return {

import React from 'react'
import Router from 'react-router'
import ChooseLayer from './ChooseLayer'
import ChoosePalette from './ChoosePalette'
import ChooseArt from './ChooseArt'
import ChooseSurface from './ChooseSurface'
import LayerSelector from './LayerSelector'
import ColorsButton from '../../ColorsButtonSort'
import UpDownSwitch from '../../UpDownSwitch'
var classNames = require('classnames')

export default React.createClass({
  mixins: [Router.State, Router.Navigation],

  onSwitchEditLayerImagesOrColors() {
    var imagesOrColors = (
      this.getParams().imagesOrColors === 'images'
        ? 'colors' : 'images')
    this.transitionTo('layerEdit', {designId: this.getParams().designId,
                                    layerId: this.getParams().layerId,
                                    imagesOrColors: imagesOrColors})
  },

  render() {
    var step = this.getParams().step
    var layerId = this.getParams().layerId
    var editingLayerImages = this.getParams().imagesOrColors === 'images'
    var editingLayerColors = this.getParams().imagesOrColors === 'colors'
    return (

"use strict";
var React = require("react");
var Router = require("react-router");
var classSet = require("react/lib/cx");
var Navigation = Router.Navigation;
var State = Router.State;
var Link = Router.Link;

var NavigationLink = React.createClass({
  mixins: [State, Navigation],
  propTypes: {
    activeClassName: React.PropTypes.string.isRequired,
    to: React.PropTypes.string.isRequired
  },
  getDefaultProps: function () {
    return {
      activeClassName: "active"
    };
  },
  getClassName: function () {
    var classNames = {};

import MbeanStore from "../MbeanStore.js";
import actions from "../../actions/actions.js";

import AttributeValue from "./AttributeValue.js";

var requestData = function (objectName, autoRefresh) {
	actions.loadMbean(objectName, autoRefresh);
};

function filterByName(searchText) {
	return (item) => item.name.toLowerCase().indexOf(searchText) > -1;
}

export default React.createClass({
	mixins: [Reflux.connect(MbeanStore, "mbean"), Router.Navigation, Router.State],

	getInitialState() {
		this.inputComponents = {};
		return {
			searchText: ""
		}
	},

	onChangeSearchText() {
		this.setState({searchText: this.refs.searchText.getValue()})
	},

	onClearSearchText() {
		this.setState({searchText: ""})
	},