How to use FlowRouter in a mixed Blaze/React project?

help
1

My current Blaze app is structured in custom packages, in a domain-oriented way. So a package will typically contain a route for FlowRouter (e.g. a user profile mapped to /user).

I now want to develop new packages, but based on React. I’ve seen in the Meteor guide that FlowRouter supports both technologies. However, it uses different approaches to insert a component into a layout container. For Blaze, it uses BlazeLayout, for React it uses mount() from the react-mounter package.

As a layout component, BlazeLayout uses a Blaze template, while mount() uses a React component.

My question: How can I mix these two layout approaches, i.e. how could I render a React component into a layout that has been setup by BlazeLayout or vice versa, i.e. render a Blaze template into a React container? Is this even possible?

I can see how this might be possible if you replace the whole layout on each route change. But what if I just want to replace a part of the layout (i.e. a single placeholder), with either a React component or a Blaze template?

I could also wrap the ReactComponent as a Blaze template using react-template-helper, but this would cause a lot of boilerplate code and also make the React-based package dependent on Blaze which I would like to avoid.

2

https://atmospherejs.com/meteor/react-template-helper

template

<template name="packageLocationUpdater">
  <div>
    {{> React component=Component }}
  </div>
</template>

helpers

import PackageLocationUpdater from "./PackageLocationUpdater";

Template.packageLocationUpdater.helpers({
  Component: () => PackageLocationUpdater
});

react

import _ from "lodash";
import React from "react";

const handleSubmit = event => {
  event.preventDefault();
  debugger;
};

const emptyState = {
  packageId: "",
  currentLocation: "",
  newLocation: ""
};

class PackageLocationUpdater extends React.Component {
  constructor() {
    super();
    this.state = emptyState;
  }
. . .