Help with material-ui leftNav,react-router and redux

gistfile1.md

I am having trouble getting this to work. I'm trying to get the material ui leftNav to work with react router and redux with nav going through the store and router. This was close, but didn't get all the way to the menu item.

TypeError: Cannot read property 'isActive' of undefined

I was also referring to these examples: https://github.com/callemall/material-ui/blob/master/docs/src/app/components/app-left-nav.jsx

http://codetheory.in/react-integrating-routing-to-material-uis-left-nav-or-other-components/

Here is the component I'm working on. I started with react-redux-universal-hot-example. This component is going into the App component.

import React, { Component } from 'react';
import LeftNav from 'material-ui/lib/left-nav';
import RaisedButton from 'material-ui/lib/raised-button';

const menuItems = [
  { route: '/widgets', text: 'Widgets' },
  { route: 'survey', text: 'Survey' },
  { route: 'about', text: 'About' }
];

export default class MaterialLeftNav extends Component {
  static propTypes = {
    history: React.PropTypes.object
  }

  static contextTypes = {
    location: React.PropTypes.object,
    history: React.PropTypes.object
  }

  contructor(props) {
    super(props);
  }

  _onLeftNavChange(e, key, payload) {
    this.props.history.pushState(null, payload.route);
  }

  _handleTouchTap() {
    this.refs.leftNav.toggle();
  }

  _getSelectedIndex() {
    let currentItem;

    for (let i = menuItems.length - 1; i >= 0; i--) {
      currentItem = menuItems[i];
      if (currentItem.route && this.props.history.isActive(currentItem.route)) return i;
    }
  }

  render() {
    return (
      <div>
        <LeftNav
          ref="leftNav"
          docked
          menuItems={menuItems}
          selectedIndex={this._getSelectedIndex()}
          onChange={this._onLeftNavChange}
        />
        <RaisedButton label="Toggle Menu" primary onTouchTap={this._handleTouchTap} />
      </div>
    );
  }

}

Just to add another comment: I'm using React v.14 and React Router 1.0 and found this to make routing work nicely with my application. It looks like the React Router api changed for this stuff from Navigation to the History object. I fought with this for a while and after realizing that I'm using ES6 classes (no mixins allowed) and Router v1.0, this is a way to make it work. Some of this was inspired by @CalebEverett above (so, thank you!). A main difference is I've added the History object to the Navigation (my component, not to be confused with React Router) context.

import React from 'react';
// Link not used anymore
//import { Link } from 'react-router';
import AppBar from 'material-ui/lib/app-bar';
import LeftNav from 'material-ui/lib/left-nav';
import MenuItem from 'material-ui/lib/menus/menu-item';

class Navigation extends React.Component {

    toggleNav() {
        this.refs.leftNav.toggle();
    };

    // since we are not using React Router <Link>, this manually
    // changes the state using the History object
    handleNavChange(event, selectedIndex, menuItem) {
        this.context.history.pushState(null, menuItem.route);
        this.refs.leftNav.toggle();
    }

    render() {
        // TODO: React Router typically uses <Link> components for routing
        // We are hacking around using Material-Ui instead with passing the
        // History object for routing
        // <Link to={item.route}>{item.text}</Link>

        // Our nav links. key is required by Material-UI
        const navLinks = [
            {route: '/dashboard', text: 'Dashboard', key: 0},
            {route: '/settings', text: 'Settings', key: 1},
            {route: '/logout', text: 'Logout', key: 2}
        ];

        return (
            <div>
                <AppBar title="ISI Dashboard" onLeftIconButtonTouchTap={this.toggleNav.bind(this)}></AppBar>
                <LeftNav ref="leftNav" docked={false} menuItems={navLinks} onChange={this.handleNavChange.bind(this)} />
            </div>
        );
    }
}

// Since this is not a <Route> component, we add History to the context
Navigation.contextTypes = {
  history: React.PropTypes.object
};

export default Navigation;

My app looks like:

import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'react-router';
import { Link, Route, IndexRoute } from 'react-router';
import './main.scss';
import App from './components/App/app';
import Dashboard from './components/Dashboard/dashboard';
import Settings from './components/Settings/settings';

/**

This is the entry point for the app.

*/

let injectTapEventPlugin = require("react-tap-event-plugin");

//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

ReactDOM.render((
    <Router>
        <Route path="/" component={App}>
            <IndexRoute component={Dashboard} />
            <Route path="dashboard" component={Dashboard} />
            <Route path="settings" component={Settings} />
        </Route>
    </Router>
), document.getElementById('app'));

import React from 'react';
import Navigation from '../Navigation/navigation';

class App extends React.Component {
    render() {
        return (
            <div>
                <Navigation />
                {this.props.children}
            </div>
        );
    }

}

export default App;

1. You can just initialise the tap event plugin directly:
   require("react-tap-event-plugin")()
2. If your app has no state you do not need to wrap it in a component. A normal function will do.
   So you can write your App component like this:

import React from 'react';

const App = () => (
  <div>
    <Navigation />
     {this.props.children}
  </div>
)

export default App