[Rubix 3.2] Header.jsx Menu Itens Link not working.

Header.jsx

import { State, Navigation } from 'react-router';
import docCookies from './cookies';
import classNames from 'classnames';
import Helpers from 'util/Helpers';
import MenuServicos from '../routes/components/MenuServicos';

import { Link } from 'react-router';
import { SidebarBtn } from 'global/jsx/sidebar_component';

class Brand extends React.Component {
  render() {
    return (
      <NavHeader {...this.props}>
        <NavBrand tabIndex='-1'>
          <img src='/imgs/logo.png' alt='Pixma' width='80' height='39' />
        </NavBrand>
      </NavHeader>
    );
  }
}


var DirectNavItem = React.createClass({
  mixins: [State, Navigation],
  render() {
    var active = false;
    var currentLocation = this.context.router.state.location.pathname;

    if(!active && this.props.path) {
      active = this.isActive(this.props.path) && (currentLocation == this.props.path);
    }

    var classes = classNames({
      'pressed': active
    });
    return (
      <NavItem className={classes} {...this.props}>
        <Link to={this.props.path}>
          <Icon bundle={this.props.bundle || 'fontello'} glyph={this.props.glyph} />
        </Link>
      </NavItem>
    );
  }
});

var Skins = React.createClass({
  switchSkin(skin, e) {
    e.preventDefault();
    e.stopPropagation();
    for(var i=0; i < Skins.skins.length; i++) {
      $('html').removeClass(Skins.skins[i]);
    }
    $('html').addClass(skin);
    vex.close(this.props.id);
  },
  
  render() {
    return (
      <Grid style={{margin: '-2em'}}>
        <Row>
          <Col xs={12} className='text-center bg-darkgrayishblue75' style={{marginBottom: 25}}>
            <div className='fg-white' style={{fontSize: 24, lineHeight: 1, padding: '25px 10px'}}>
              Choose a theme:
            </div>
          </Col>
        </Row>
        <Row>
          <Col xs={4} className='text-center'>
            <a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'default')}>
              <Icon glyph='icon-fontello-stop icon-4x' style={{color: '#E76049'}} />
            </a>
          </Col>
          <Col xs={4} className='text-center'>
            <a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'green')}>
              <Icon glyph='icon-fontello-stop icon-4x' className='fg-darkgreen45' />
            </a>
          </Col>
          <Col xs={4} className='text-center'>
            <a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'blue')}>
              <Icon glyph='icon-fontello-stop icon-4x' className='fg-blue' />
            </a>
          </Col>
        </Row>
        <Row>
          <Col xs={4} className='text-center'>
            <a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'purple')}>
              <Icon glyph='icon-fontello-stop icon-4x' className='fg-purple' />
            </a>
          </Col>
          <Col xs={4} className='text-center'>
            <a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'brown')}>
              <Icon glyph='icon-fontello-stop icon-4x' className='fg-brown' />
            </a>
          </Col>
          <Col xs={4} className='text-center'>
            <a href='#' style={{border: 'none'}} onClick={this.switchSkin.bind(this, 'cyan')}>
              <Icon glyph='icon-fontello-stop icon-4x' className='fg-darkcyan' />
            </a>
          </Col>
        </Row>
      </Grid>
    );
  }
});

Skins.skins = ['default', 'green', 'blue', 'purple', 'brown', 'cyan'];


var HeaderNavigation = React.createClass({

  handleSkinSwitch(e) {
    e.preventDefault();
    e.stopPropagation();
    var vexContent;
    vex.dialog.open({
      afterOpen: ($vexContent) => {
        vexContent = $vexContent;
        return ReactDOM.render(<Skins id={$vexContent.data().vex.id} />, $vexContent.get(0));
      },
      afterClose: () => {
        ReactDOM.unmountComponentAtNode(vexContent.get(0));
      }
    });
  },
  getInitialState: function(){
    ////console.log('header - getInitialState ');       
    return { 
      ose:null,
      oseList:null
    };
  },
      //retorno de sucesso do Helpers
    success: function (result) {

      ////console.log('++++++ OSE carregada !!! ++++' , result.dataObject)
      //////console.log('++++++ servicos ose oseList !!! ++++' , result.dataObject.oseList)
          this.setState({
            ose: result.dataObject,
            oseList: result.dataObject.oseList
          });
        //////console.log('++++++ servicos ose oseList !!! ++++' , this.state.ose.oseList.length);
        
    },
    limparTela: function(){

    },
    //retorno de erro do Helpers
    error: function (xhr, textStatus, errorThrown) {
      vex.dialog.alert(xhr.returnStatus.description);
      // só pra teste, apagar depois e deixar o alerta
      //Helpers.ShowMessageError(xhr.returnStatus.message);
    },
    componentDidMount: function() {
      
      Helpers.Get('/Cliente/951009/OSE/Situacao/201', this.success, this.error);
    },



 //<MenuServicos  servicosCarrinho={this.state.ose.oseList[0].OSEItens}/>


  render: function() {
    

    if(this.state.ose === null || this.state.oseList === null || this.state.oseList[0].length === 0 ){
        ////console.log('entrou sem valor');
        return <div />
    }
    ////console.log('this.state.oseList' , this.state.oseList);

    var i = 0;
    var menu = [
      <MenuItem header key={i}>Serviços a serem contratados:</MenuItem>,
    ];

    menu = menu.concat(this.state.oseList[0].OSEItens.map(function(ose, index) {
      i = index+1;
            return (
              <MenuItem active key={i} href='/app/atualizaSenha'>
                          <Grid>
                            <Row>
                              <Col xs={2}>
                                <Icon className='fg-darkgreen45' bundle='fontello' glyph='ok-3' />
                              </Col>
                              <Col xs={10} collapseLeft className='notification-container' style={{width: 265}}>
                                <div className='time'>
                                  <strong className='fg-darkblue'><em>{ose.servico.descricao} </em></strong>
                                </div>
                                <div className='message-header fg-darkgray50'>
                                  <strong className='fg-darkblue'>{ose.area} m²</strong><strong> </strong><strong className='fg-darkblue'></strong>
                                </div>
                                <div className='message-details fg-text'>
                                  Valor total: R${Helpers.formataReal(ose.valorTotal)}
                                </div>
                              </Col>
                            </Row>
                          </Grid>
                  </MenuItem>
      );
  }));

    menu = menu.concat(
              <MenuItem noHover key={i+1}>
                <Grid collapse style={{marginBottom: -10}}>
                  <Row>
                    <Col xs={12} collapseLeft collapseRight>
                      <Button block className='notification-footer-btn left-btn'>FINALIZAR COMPRA</Button>
                    </Col>
                  </Row>
                </Grid>
              </MenuItem>
  );




    return (
      
      <NavContent className='pull-right' {...this.props}>
        <Nav className='hidden-xs' >
           <NavItem dropdown toggleOnHover className='collapse-left' >
              <DropdownButton nav>
                  <Icon bundle='fontello' glyph='basket-alt' />
                  <Badge className='fg-black bg-red notification-badge'>{this.state.oseList[0].OSEItens.length}</Badge>
              </DropdownButton>
              <Menu alignRight id='rss-menu' className='double-width' alwaysInactive>
              {menu}
              </Menu>
          </NavItem>           
         </Nav>

        <Nav>
          <NavItem className='logout' href='#' >
            <Icon bundle='fontello' glyph='off-1' />
          </NavItem>
        </Nav>
      </NavContent>
    );
  }
});

export default class Header extends React.Component {
  render() {
    return (
      <Grid id='navbar' {...this.props}>
        <Row>
          <Col xs={12}>
            <NavBar fixedTop id='rubix-nav-header'>
              <Container fluid>
                <Row>
                  <Col xs={3} visible='xs'>
                    <SidebarBtn />
                  </Col>
                  <Col xs={6} sm={4}>
                    <Brand />
                  </Col>
                  <Col xs={3} sm={8}>
                    <HeaderNavigation pressed={this.props.pressed} />
                  </Col>
                </Row>
              </Container>
            </NavBar>
          </Col>
        </Row>
      </Grid>
    );
  }
}