[SOLVED] View state management with FlowRouter and React

I’m looking for some direction on view state managment using FlowRouter and React.

For context, I’m transitioning an existing app that uses Blaze. New functionality is being built with React, and eventually the Blaze portions will be replaced. (This is why we’re using FlowRouter rather than React Router, for now.)

What I’m currently considering:

  • use one FlowRouter route as the entry point for the React section,
  • retrieve state information from the URL in the router and pass it as props into the React app container,
  • use a React Context to make state information available throughout,
  • use history.pushState() to keep track of the view state.

Does this sound like a sane strategy? Is there a better way of doing this? I searched around, but wasn’t able to find anything that put all the pieces together, and this is my first major project using React with Meteor (a combination I’m pretty thrilled with.)

TLDR: use FlowRouter to catch any routes matching the React section, load assets, and use React Router for the rest.

I had done some testing with this earlier and had run into issues which I attributed to trying to use both FlowRouter and React Router together, rather than my own boneheadedness. It was the latter.

This appears to work fine, and allows us to keep all the React bits entirely segregated with much less fussing.

lib/routes.js

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import React from 'react';
import { render } from 'react-dom';

const admin = FlowRouter.group({
  waitOn() {
    // react section has different styling
    return import('/client/imports/react/layout.less');
  }
});

admin.route('/admin*', {
  action() {
    import('../imports/ui/react/layouts/App.js')
      .then(({ default: App }) =>
        render(<App />, document.getElementById('reactApp'))
      );
  }
});