How does React mesh with iron:router?

help
1

I have built a little Facebook-esque feed using Meteor and Blaze and IronRouter.

I’ve been looking into React and everything makes sense to me, it allows my components logic to be in one place and make it easy to grok.

Howver I’m having trouble mixing React with how layouts work. For example, I render a different layout when a user is signed out:

Router.configure({
  layoutTemplate: 'layout'
});

Router.route('/', { name: 'home' });
Router.route('/profile', { name: 'profile' });

// This is the route for anonymous users.
Router.route('/welcome', { name: 'welcome', layoutTemplate: 'welcomeLayout' });

Router.onBeforeAction(function() {
  if (!Meteor.userId()) {
    this.redirect('/welcome');
    this.next();
  } else {
    this.next();
  }
});

I guess I’m just asking, am I supposed to render React components within Blaze templates? Is that the proper way to do it? Since I’m new to both Meteor and React, I’d learn things the right way instead of hacking my way towards a working site.

1 Like
2

It you are rendering React component inside templates, if should work with IR without any issues.

If you use pure react app, there are two options for you:

  1. FlowRouter + React Layout
  2. React Router
1 Like
3

I’m actually installing flow-router as I type this. :thumbsup:

Hopefully it’ll be a simple process.

4

@arunoda I misread, you said use FlowRouter + React Layout. So I shouldn’t use flow-layout?

Is react-layout an alternative to flow-layout or do they aim to solve completely different problems?

5

Flow Layout (will be changed to Blaze Layout) is a way to render Blaze templates. React Layout is for React.

There APIs are similar, but slightly different since they are two different things.

6

Is there any support to mix and match blaze components defined as HTML inside react jsx?