Active link on sidebar with React-Router + Material-UI drawer?

react
1

###Setup and Problem
I have a Material-UI <Drawer> as my sidebar. It has react-router <Link> components nested in it. Each <Link> has a Material-UI <MenuItem> nested inside of it.

import React from 'react';
import { Link } from 'react-router';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import Group from 'material-ui/svg-icons/social/group';
import Settings from 'material-ui/svg-icons/action/settings';


export default class AdminNavigation extends React.Component {

    render() {
      return <div>
              <Drawer open={true} width={190}>
                <Link to="/admin/users"><MenuItem primaryText="Users" leftIcon={<Group />}/></Link>
                <Link to="/admin/settings"><MenuItem primaryText="Settings" leftIcon={<Settings />}/></Link>
              </Drawer>
            </div>
    }

  }

I need to have an active class on the MenuItem

###activeClass or activeStyle
Ideally, I’d just use react-router’s activeClass or activeStyle but I think you can only put that on the <Link> component and it won’t help with the nested <MenuItems>… unfortunately I can’t find an react-router feature like zimme:active-route for FlowRouter.

###this.props.location.pathname not working anymore?
I was trying to conditionally add the class to the menu-item but couldn’t access this.props.location.pathname from the router but it is coming up undefined… I thought maybe it was meteor specific but this guy seems to have the same issue (see comments):

any help would be greatly appreciated… so simple in meteor + FlowRouter!!!