Migrating from Iron Router to FlowRouter on Existing App

help
1

We are currently trying to migrate our app from Iron Router to Flow Router in order to use React. The problem is the scale of the app would make this a huge endeavor that would take too long to tackle at once, so the ideal way would be to switch each page individually.

Does anyone have experience in an app running both of these routing options?

Seems like Iron Router just does not like to play nice with others. As much as we’ve tried, it seems like there is always a problem that comes up. Is it even possible?

2

FlowRouter is for now not really actively maintained for as far as I understand. Fortunately React has good alternatives (also for as far as I’ve read. Sorry I’m not yet using react). Might this be a good option?

Besides that. I’ve worked with both iron-router and flow-router and switched eventually to flow-router and I’m using it still for a very big project. The way I switched was basically by abstracting the router into a library it wrapped all methods that the system was using. Eventually all components used the wrapper and then I switched the wrapper to use flow-router.

My luck is that i’m actually just using a few methods like getQueryParam and getParam.

3

Iron Router was pretty annoying to use in my opinion, and I do not like how you had to write logic directly in your Iron Router code. I did not like how it forced projects to be organized at all.

FlowRouter is pretty straight forward to use. The documentation/examples show you how to make a route.

As an example, IR liked you to subscribe in waitOn (which waited until the page loaded) - if you throw the code in onRendered it does the same thing.

The main thing is, all of your logic that you had to write with Iron Router waitOn and data: function()'s, you can instead move to the template you are rendering. Just take the logic direction out of waitOn/data, and put it inside your templates onCreated/onRendered, and it should work. Example:

Template.mainLayout.onCreated(function () {
    var template = this;
    template.autorun(function () {
        template.subscribe('mySubscription');
    }
});

Then, in IR you had to make a helper to retrieve the subscribed data from minimongo by returning it from the data() function. With Flow, you can just retrieve it through a normal helper.

Template.myTemplate.helpers({
  subscriptionData: function() {
        return myCollection.find();
}});

This is a much better way to organize your project. The logic for the template will actually be ON the template, rather than in the router. The router code itself will be clean - just the actual URL, a template name, and let it know where to render (aside from possibly some security, for example ensuring a user is signed in). Router code itself will be nice and short.