Meteor 1.3 + React - Flow-Router - React-Mount: navbar navigation error

help
1

I am creating a simple app and I created my routes as:

import React from 'react';
import {mount} from 'react-mounter';

import {MainLayout} from './layouts/mainLayout.jsx';
import App from '../imports/ui/App.jsx';
import Home from '../imports/ui/Home.jsx';
import NewPoll from '../imports/ui/NewPoll.jsx';
import Header from '../imports/ui/partials/header.jsx';

FlowRouter.route('/polls', {
  name: 'polls',
  action() {
    mount(MainLayout, {
      header: (<Header  />),
      content: (<App />) // polls={polls}
    })
  }
});

FlowRouter.route('/', {
  name: 'home',
  action() {
    mount(MainLayout, {
      content: (<Home />)
    })
  }
});

FlowRouter.route('/newPoll', {
  name: 'newPoll',
  action() {
    mount(MainLayout, {
      content: (<NewPoll />)
    })
  }
});

If I change the url manually the pages render as expected. However, when clicking the links in the Header (navbar)

import React, { Component, PropTypes } from 'react';

export default class Home extends Component {
  render() {
    return (
      <div className="header">
        <nav className="flex-nav ">
          <div className="header-section">
            <div className="nav-item header-logo">
              <h1>Cool Polls</h1>
            </div>
            <div className="nav-item "><a href="/" ><i className="fa fa-home"></i> Home</a></div>
            <div className="nav-item "><a href="/polls"><i className="fa fa-cogs"></i> Polls</a></div>
            <div className="nav-item"><a href="/newPoll"><i className="fa fa-map"></i> New Poll</a></div>
            <div className="nav-item"><a href="*"><i className="fa fa-shopping-bag"></i> Buy</a></div>
            <div className="nav-item">Page 4</div>
          </div>
          <div className="header-section">
            login
          </div>
        </nav>
      </div>
    )
  }
};

The URL at the browser changes, but the app doesn’t actually go that the corresponding route and I get this error:
Exception from Tracker recompute function:
meteor.js?hash=199010c…:913 TypeError: Cannot read property ‘call’ of undefined
at App.TrackerReactComponent._this.constructor.componentWillUnmount (main.js:47)
at ReactCompositeComponentMixin.unmountComponent (modules.js?hash=bf94cc1…:6774)
at Object.ReactReconciler.unmountComponent (modules.js?hash=bf94cc1…:5182)
at Object.ReactChildReconciler.updateChildren (modules.js?hash=bf94cc1…:13915)
at ReactDOMComponent.ReactMultiChild.Mixin._reconcilerUpdateChildren (modules.js?hash=bf94cc1…:13537)
at ReactDOMComponent.ReactMultiChild.Mixin._updateChildren (modules.js?hash=bf94cc1…:13672)
at ReactDOMComponent.ReactMultiChild.Mixin.updateChildren (modules.js?hash=bf94cc1…:13647)
at ReactDOMComponent.Mixin._updateDOMChildren (modules.js?hash=bf94cc1…:11181)
at ReactDOMComponent.Mixin.updateComponent (modules.js?hash=bf94cc1…:11010)
at ReactDOMComponent.Mixin.receiveComponent (modules.js?hash=bf94cc1…:10955)

Someone knows how to solve this problem. Or can you point me out to a working example?

2

I found the solution.

When moving from one route to another, (if using TrackerReact), it is necessary to “unmount” the subscription.
In my case, on the App.jsx I added:

....
export default class App extends TrackerReact(Component) {
  constructor() {
        super();
        this.state = {
          subscription: {
            pollsData: Meteor.subscribe('polls', {sort: {createdAt: -1}}) //add this when removing autopublish and insecure
          }
        }
    }

    componentWillUnmount() {
        this.state.subscription.pollsData.stop();
    }
....