ReactLayout rendering on top of BlazeLayout and vice versa

[makstr]

I have routes which use both BlazeLayout and ReactLayout. This is because I am using meteor-useraccounts/flow-routing which only supports Blaze at the time.

The Problem is when a browser calls a route which uses ReactLayout and the follows to a page with BlazeLayout or vice versa. The result is two layouts displayed one underneath the other.

FlowRouter.route('/', {
  name : "start",
  action: function(params, queryParams) {
    BlazeLayout.render("TopAppLayoutBlaze", { main: "HomePage" });
  }
});

FlowRouter.route("/tests/test01", {
  action: function() {
    ReactLayout.render(X.TopAppLayout, {
      content: <SimpleComponent name="Test" />
    })
  }
});

[arunoda]

For this case, don't mix layout engines. Render ReactComponents inside blaze. See: http://react-in-meteor.readthedocs.org/en/latest/react-template-helper/

[SachaG]

Actually I was hoping to combine both as well, to show how Blaze and React can coexist in the same app while you're migrating from one to the other. But I case if it doesn't work I'll just find another way.

[arunoda]

It's not possible to combine but it's possible to co-exists. But there is no use in that. My suggested solution is the best idea.

[SachaG]

Yeah I meant coexist, sorry. I actually did try your solution but it's a bit tricky in my case as I wanted to use a React layout. Anyway I'll make a video about it soon, maybe you can tell me if there's a better way to do it then.

[arunoda]

sure.

On Sun, Dec 27, 2015 at 11:04 AM Sacha Greif notifications@github.com wrote:

Yeah I meant coexist, sorry. I actually did try your solution but it's a bit tricky in my case as I wanted to use a React layout. Anyway I'll make a video about it soon, maybe you can tell me if there's a better way to do it then.

— Reply to this email directly or view it on GitHub https://github.com/kadirahq/meteor-react-layout/issues/11#issuecomment-167382195 .

[yonatan-py]

for coexisting:

BlazeLayout.reset()
ReactLayout.render(SomeReactComponent)

[musemind]

I have a blaze app and use flow-router-ssr with react for some SEO content pages. To clear the React Container, I render a empty span before the blaze rendering:

FlowRouter.route('/login', {
  action: function(params, queryParams) {
    ReactLayout.render(React.createClass({ render() {return <span></span>} }))
    BlazeLayout.render('skeleton', { content: "login" })
  }
})

And the other way round:

FlowRouter.route('/', {
  action: function(params, queryParams) {
    if (Meteor.isClient) {
      BlazeLayout.reset()
    }
    ReactLayout.render(MainLayout, {
      content: <Home />
    })
  }
})

[timbrandin]

I'm curious how you would do this with React Mounter

[yegortokmakov]

mount(() => (<span></span>));