In this episode, we’ll finally switch out Iron Router for FlowRouter. Since we’ve already done most of the work, it should be relatively easy!

Note: don’t hesitate to review past episodes if you want to see how we slimmed down our router code to make the switch easier.

We’ll need to cover three main areas for this migration:

  1. The route definition code.
  2. The Router API calls.
  3. Router Spacebars helpers.

Route Definitions

FlowRouter’s route-definition syntax is slightly different from Iron Router’s, but still uses the same basic properties: a route path, name, and template:

FlowRouter.route('/chapter/:slug', {
  name: 'chapter',
  action: function () {
    BlazeLayout.render('app', {main: 'chapterPage'});
  }
});

Template rendering is done in the action callback, and requires the Blaze-layout package.

API Calls

This is fairly straightforward. But note that you shouldn’t just replace Iron Router’s Router.current() by FlowRouter’s FlowRouter.current(), since FlowRouter.current() is not reactive.

Instead, you should use FlowRouter’s various API functions.

Spacebars Helpers

FlowRouter doesn’t come with any helpers out of the box, but you can use the handy FlowRouter helpers package.

Note that unlike Iron Router, it won’t automatically apply the current data context to the route. So for a /user/:slug route, you’d have to replace this:

{{#with user}}
  {{pathFor "userProfile"}}
{{/with}}

With this:

{{#with user}}
  {{pathFor "userProfile" slug=slug}}
{{/with}}

Server-Side Routes

Finally, unlike Iron Router, FlowRouter doesn’t handle server-side routing at all. So if that’s something you need, you’ll have to take care of it separately with the Picker package.