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


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.



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


import PackageLocationUpdater from "./PackageLocationUpdater";

  Component: () => PackageLocationUpdater


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

const handleSubmit = event => {

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

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