Assign ReactJs Props to FlowRouter

Question

How do I pass the props from FlowRouter to my react component. Is that possible? The documentation is that great.

Im doing something like this:

FlowRouter.route('/dashboard', {
  name: 'dashboard',
  action(){
    var x = Projects.find().fetch(); // this not working
    console.log(x); // x is []. Why?
    ReactLayout.render(App, {
      nav: <Nav />,
    content: <Profile data={x}/>
    });
  }
});

In my app I wish to say this.props.data but the array is empty. I have to put the logic into the react component. Is that the correct way? I hope not.

Answer 1

I think you need subscriptions... see documentation here https://github.com/kadirahq/flow-router#subscription-management

FlowRouter.route('/dashboard', {
  name: 'dashboard',
  subscriptions(){
      this.register('myProjects', Meteor.subscribe('projects'));
  },
  action(){
    ReactLayout.render(App, {
      nav: <Nav />,
      content: <Profile data={myProjects}/>
    });
  }
});

But after further review, they are actually recommending that you do get the meteor data in the React Component... see documentation here

https://kadira.io/academy/meteor-routing-guide/content/subscriptions-and-data-management/with-react

  Profile = React.createClass({
     mixins: [ReactMeteorData],
     getMeteorData() {
       var data = {};
       var handle = Meteor.subscribe('projects');
       if(handle.ready()) {
         data.projects = Projects.find({});
       }
       return data;
     },    
  });

Sample Project: https://github.com/aaronksaunders/meteor-react-demo2