Meteor with ReactJS and FlowRouter

react
1

I’ve been getting more comfortable with Iron Router but now want to implement ReactJs and I’ve been reading on Meteorhacks that using FlowRouter is better for the reactive paradigm.

One thing that i’ve noticed, and i’m totally a novice at React and Meteor in general, is that with Iron and FlowRouter you can bind data to a route. But it seems with React it binds the data to the UI leaving the router to only handle the job of routing.

Is this is a correct notion or would someone clarify the errors in my thinking about using these technologies together?

Thanks.

2

Yes it is. Let the router to do the routing. That’s the whole idea of flow router.

3

Thank you sir for what you contribute to the community, I’m a big fan!

1 Like
4

Quick question where can I find what other properties I can use on FlowLayout? For example are
’top’ and ‘main’ the only properties/methods that FlowLayout has? Is there a ‘bottom’ method for a footer? I went to the GitHub page for https://github.com/meteorhacks/flow-layout and to Atmosphere to see if there were anymore instructions but didn’t find any? Any direction pointing would be very much appreciated. Thank you.

5

FlowRouter doesn’t do anything in relation to templates, which is the point of it.

Not doing anything means no rendering of templates and no setting the data context of templates. The reason is that when a template receives its data context through e.g. IronRouter and the data changes reactively, the router hooks themselves must rerun in order to redefine the context and update the UI.

Keeping the flow of data – from some collection into some template – outside the scope of the router potentially makes it simpler both to reason about the app and to use something like React. For rendering templates with Blaze, FlowLayout can be used, and we now also have template level subscriptions.

The major advantage of using IronRouter, in my view, is that it takes the role of an application framework – meaning that it provides you with a pattern for organizing your templates and subscriptions.

6

Not it’s not.

top and main are only for the demo purpose. You can pass any kind of data to the flow router. See:

<template name="layout1">
  {{> Template.dynamic template=top}}
  {{> Template.dynamic template=main}}
</template>

FlowLayout.render('layout1', { top: "header", main: "postList" });

In the above case, we’ve used top and main regions and send templates to those regions via the FlowLayout.render() call.

But you can pass anykind of data to it and dynamically render anything.

7

One more question Aurnoda. I was reading in the documentation that you can change the default wrapper ID of “__flow-root” to something else. Do you know where I can change that value? Thank you.

8

@deb Thanks for the explanation:)